<template>
    <div class="user-center">
        <!-- 左侧侧边栏 -->
        <div class="sidebar">
            <div class="user-profile">
                <div class="avatar">
                    <img :src="isVisitorMode ? (viewUserInfo?.avatar && viewUserInfo.avatar.startsWith('http') ? viewUserInfo.avatar : '/images/user/' + viewUserInfo?.avatar) : (userStore.userInfo.avatar && userStore.userInfo.avatar.startsWith('http') ? userStore.userInfo.avatar : '/images/user/' + userStore.userInfo.avatar) || 'https://via.placeholder.com/60'" alt="用户头像" />
                </div>
                <div class="user-info">
                    <h3>{{ isVisitorMode ? (viewUserInfo?.nickname || '用户昵称') : (userStore.userInfo.nickname || '用户昵称') }}</h3>
                    <div v-if="isVisitorMode" class="visitor-badge">
                        <el-tag size="small" type="info" effect="light">访客模式</el-tag>
                    </div>
                </div>
            </div>

            <!-- 工作区导航 -->
            <div class="workspace">
                <h4>交易管理</h4>
                <div class="nav-item" :class="{ active: activeMenu === 'products' }" @click="handleMenuSelect('products')">
                    <i class="el-icon"><el-icon><Goods /></el-icon></i>
                    <span>{{ isVisitorMode ? '发布的商品' : '我的商品' }}</span>
                </div>
            </div>

            <!-- 主要导航菜单 -->
            <div class="main-nav">
                <div class="nav-item" :class="{ active: activeMenu === 'orders' }" @click="handleMenuSelect('orders')" v-if="!isVisitorMode">
                    <i class="el-icon"><el-icon><List /></el-icon></i>
                    <span>我的订单</span>
                </div>
                <div class="nav-item" :class="{ active: activeMenu === 'buying' }" @click="handleMenuSelect('buying')">
                    <i class="el-icon"><el-icon><ShoppingCart /></el-icon></i>
                    <span>{{ isVisitorMode ? '发布的求购' : '我的求购' }}</span>
                </div>
                <div class="nav-item" :class="{ active: activeMenu === 'favorites' }" @click="handleMenuSelect('favorites')" v-if="!isVisitorMode">
                    <i class="el-icon"><el-icon><Star /></el-icon></i>
                    <span>我的收藏</span>
                </div>

                <div class="nav-item" :class="{ active: activeMenu === 'profile' }" @click="handleMenuSelect('profile')">
                    <i class="el-icon"><el-icon><User /></el-icon></i>
                    <span>{{ isVisitorMode ? '用户资料' : '个人资料' }}</span>
                </div>
                <div class="nav-item" :class="{ active: activeMenu === 'settings' }" @click="handleMenuSelect('settings')" v-if="!isVisitorMode">
                    <i class="el-icon"><el-icon><Setting /></el-icon></i>
                    <span>设置</span>
                </div>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="main-content" :class="{ 'profile-fixed': activeMenu === 'profile' }">
            <!-- 发布商品模态框 -->
            <el-dialog
                v-model="showPublishModal"
                :show-header="false"
                width="700px"
                @close="handleCloseModal"
                :close-on-click-modal="false"
                class="publish-dialog"
            >
                <div class="dialog-close-btn" @click="handleCloseModal">
                    <el-icon><Close /></el-icon>
                </div>
                
                <el-form :model="publishForm" label-width="80px" ref="publishFormRef" :rules="publishRules">
                    <el-form-item label="商品名称" prop="name">
                        <el-input v-model="publishForm.name" placeholder="请输入商品名称"></el-input>
                    </el-form-item>
                    <el-form-item label="商品描述" prop="description">
                        <el-input type="textarea" v-model="publishForm.description" rows="4" placeholder="请描述您的商品状况、购买时间等信息"></el-input>
                    </el-form-item>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="价格" prop="price">
                                <div class="premium-price-input">
                                    <span class="currency-symbol">¥</span>
                                    <el-input-number 
                                        v-model="publishForm.price" 
                                        :min="0" 
                                        :precision="2" 
                                        :step="10"
                                        :controls="false"
                                        class="price-input"
                                        placeholder="设置价格"
                                    ></el-input-number>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="原价" prop="originalPrice">
                                <div class="premium-price-input">
                                    <span class="currency-symbol">¥</span>
                                    <el-input-number 
                                        v-model="publishForm.originalPrice" 
                                        :min="0" 
                                        :precision="2" 
                                        :step="10"
                                        :controls="false"
                                        class="price-input"
                                        placeholder="设置原价"
                                    ></el-input-number>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" style="margin-top: 20px; margin-bottom: 20px;">
                        <el-col :span="12">
                            <el-form-item label="成色" prop="condition">
                                <el-select v-model="publishForm.condition" placeholder="请选择商品成色" style="width: 100%">
                                    <el-option
                                        v-for="item in conditionOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="分类" prop="categoryId">
                                <el-select v-model="publishForm.categoryId" placeholder="请选择商品分类" style="width: 100%">
                                    <el-option
                                        v-for="item in categoryOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="交易地点" prop="location">
                        <div class="location-input-container">
                            <el-input 
                                v-model="publishForm.location" 
                                placeholder="请输入期望交易地点"
                                class="location-field"
                                :suffix-icon="addressLoading ? 'Loading' : 'Location'"
                            >
                            </el-input>
                        </div>
                        <div class="location-coordinates">
                            <el-tag v-if="publishForm.coordinates && publishForm.coordinates.length === 2" size="small" type="success">已解析坐标: [{{ publishForm.coordinates[0].toFixed(6) }}, {{ publishForm.coordinates[1].toFixed(6) }}]</el-tag>
                            <el-tag v-else-if="locationInputComplete" size="small" type="info">地址将在输入完成后自动解析</el-tag>
                        </div>
                    </el-form-item>
                    <!-- 结束新增表单项 -->
                    <el-form-item label="商品图片" prop="images">
                        <div class="upload-container">
                            <el-upload
                                action="#"
                                list-type="picture-card"
                                :auto-upload="false"
                                v-model:file-list="fileList"
                                :on-preview="handlePicturePreview"
                                :on-remove="handlePictureRemove"
                                :before-upload="handleImageSelect"
                                :on-change="handleUploadChange"
                                :limit="8"
                                multiple
                                accept="image/jpeg,image/png"
                            >
                                <el-icon><Plus /></el-icon>
                                <div class="upload-text">添加图片</div>
                            </el-upload>
                            <div class="upload-tip">
                                <el-alert type="info" :closable="false">
                                    可上传8张图片，支持JPG/PNG，每张不超过2MB
                                </el-alert>
                            </div>
                        </div>
                        <el-dialog v-model="dialogVisible" title="预览图片">
                            <img w-full :src="dialogImageUrl" alt="预览图片" style="max-width: 100%;" />
                        </el-dialog>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
        
                        <el-button @click="handlePublishSubmit('draft')" :loading="publishLoading === 'draft'" :disabled="publishLoading !== false">
                            存为草稿
                        </el-button>
                        <el-button type="primary" @click="handlePublishSubmit('selling')" :loading="publishLoading === 'selling'" :disabled="publishLoading !== false">
                            发布
                        </el-button>
                    </span>
                </template>
            </el-dialog>

            <template v-if="activeMenu === 'products'">
                <!-- 商品内容 - 默认视图 -->
                <!-- 顶部标题栏 -->
                <div class="header">
                    <div class="page-title">{{ isVisitorMode ? '发布的商品' : '我的商品' }}</div>
                    <div class="header-actions" v-if="!isVisitorMode">
                        <div class="filter-button-wrapper">
                            <el-dropdown @command="handleSortSelect" trigger="click">
                                <div class="filter-button">
                                    <span>{{ sortOption || '排序方式' }}</span>
                                    <el-icon><ArrowDown /></el-icon>
                                </div>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item command="最新发布">最新发布</el-dropdown-item>
                                        <el-dropdown-item command="价格从低到高">价格从低到高</el-dropdown-item>
                                        <el-dropdown-item command="价格从高到低">价格从高到低</el-dropdown-item>
                                        <el-dropdown-item command="最多浏览">最多浏览</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                        
                        <div class="school-select-wrapper">
                            <el-dropdown @command="handleSchoolSelect" trigger="click">
                                <div class="school-select-button">
                                    <span>{{ schoolFilter || '选择学校' }}</span>
                                    <el-icon><ArrowDown /></el-icon>
                                </div>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item command="">全部学校</el-dropdown-item>
                                        <el-dropdown-item 
                                            v-for="school in schoolOptions" 
                                            :key="school.value" 
                                            :command="school.value"
                                        >
                                            {{ school.label }}
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                        
                        <div class="status-select-wrapper">
                            <el-dropdown @command="handleStatusSelect" trigger="click">
                                <div class="status-select-button">
                                    <span>{{ statusFilter || '商品状态' }}</span>
                                    <el-icon><ArrowDown /></el-icon>
                                </div>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item command="">全部状态</el-dropdown-item>
                                        <el-dropdown-item command="在售">在售</el-dropdown-item>
                                        <el-dropdown-item command="已售出">已售出</el-dropdown-item>
                                        <el-dropdown-item command="已下架">已下架</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                        
                        <el-icon class="more-icon"><More /></el-icon>
                    </div>
                </div>

                <!-- 选项卡导航 -->
                <div class="tabs">
                    <div class="tab" :class="{ active: activeTab === 'all' }" @click="handleTabChange('all')">全部</div>
                    <div class="tab" :class="{ active: activeTab === 'selling' }" @click="handleTabChange('selling')">出售中</div>
                    <div class="tab" :class="{ active: activeTab === 'sold' }" @click="handleTabChange('sold')" v-if="!isVisitorMode">已售出</div>
                    <div class="tab" :class="{ active: activeTab === 'off_shelf' }" @click="handleTabChange('off_shelf')" v-if="!isVisitorMode">已下架</div>
                    <div class="tab" :class="{ active: activeTab === 'draft' }" @click="handleTabChange('draft')" v-if="!isVisitorMode">草稿箱</div>
                </div>

                <!-- 统一使用网格布局显示商品 -->
                <div class="products-list" style="min-height: 300px;">
                    <!-- 根据 displayedProducts 渲染卡片 -->
                    <div v-for="product in displayedProducts" 
                             :key="product.id" 
                         :class="['task-card', { 'completed': product.status === 'sold' }]" 
                         :style="product.status === 'draft' ? 'background-color: white;' : ''"
                         @click="handleViewProduct(product)"
                         style="cursor: pointer;">
                        
                        <!-- 商品图片容器 -->
                        <div class="card-image-container">
                            <img 
                                :src="getProductImageUrl(product)" 
                                :alt="product.title" 
                                class="card-image"
                            />
                            <!-- 编辑按钮 - 添加在图片上方 -->
                            <div class="image-edit-button" v-if="!isVisitorMode">
                                <el-button 
                                    type="primary" 
                                    size="small" 
                                    circle 
                                    @click.stop="handleEditProduct(product)"
                                >
                                    <el-icon><Edit /></el-icon>
                                </el-button>
                            </div>
                        </div>

                        <!-- 卡片内部结构 -->
                        <div class="card-content-area"> 
                            <div class="card-tags">
                                <span v-if="product.status === 'draft'" class="tag important">待完善</span>
                                <span v-if="product.status === 'selling' && product.viewCount > 100" class="tag normal">热门</span>
                                <span v-if="product.status === 'selling' && product.isDiscounted" class="tag important">降价</span>
                                <span v-if="product.status === 'sold'" class="tag success">已完成</span>
                                <span v-if="product.status === 'off_shelf'" class="tag">已下架</span>
                            </div>
                            <h3 class="card-title">{{ product.title }}</h3>
                            <div class="card-price">
                                ￥{{ product.price }}
                                <span v-if="product.originalPrice" class="original-price">￥{{ product.originalPrice }}</span>
                            </div>
                            <div class="card-meta">
                                 <!-- Selling/Draft Meta -->
                                <template v-if="product.status === 'selling' || product.status === 'draft'">
                                <div class="date">
                                    <el-icon><Calendar /></el-icon>
                                        <span v-if="product.status === 'selling'">已发布 {{ getDaysSince(product.createdAt) }}天</span>
                                        <span v-else>发布于 {{ formatDate(product.createdAt) }}</span>
                                </div>
                                <div class="comments">
                                         <el-icon v-if="product.status === 'selling'"><ChatDotRound /></el-icon>
                                         <el-icon v-else><View /></el-icon>
                                        <span v-if="product.status === 'selling'">{{ product.commentCount || 0 }} 条留言</span>
                                        <span v-else>{{ product.viewCount || 0 }}</span>
                                </div>
                                </template>
                                 <!-- Sold Meta -->
                                <template v-if="product.status === 'sold'">
                                <div class="buyer" v-if="product.buyer">
                                    <el-icon><User /></el-icon>
                                    <span>买家: {{ product.buyer }}</span>
                                </div>
                                <div class="date">
                                    <el-icon><Calendar /></el-icon>
                                    <span>{{ formatDate(product.updatedAt || product.createdAt) }}</span>
                                </div>
                                </template>
                                 <!-- Off Shelf Meta -->
                                <template v-if="product.status === 'off_shelf'">
                                <div class="date">
                                    <el-icon><Calendar /></el-icon>
                                    <span>下架于 {{ formatDate(product.updatedAt) }}</span>
                                </div>
                                <div class="comments">
                                    <el-icon><View /></el-icon>
                                    <span>{{ product.viewCount || 0 }}</span>
                                </div>
                                </template>
                            </div>
                        </div>
                        
                        <!-- 底部操作按钮区域 -->
                        <div class="card-footer-actions" v-if="!isVisitorMode">
                            <template v-if="product.status === 'selling'">
                                <el-button 
                                    type="warning" 
                                    size="small" 
                                    @click.stop="handleOffShelfProduct(product)"
                                >
                                    <el-icon><RemoveFilled /></el-icon> 下架商品
                                </el-button>
                            </template>
                            
                            <template v-else-if="product.status === 'off_shelf'">
                                <el-button 
                                    type="success" 
                                    size="small" 
                                    @click.stop="handleRelistProduct(product)"
                                >
                                    <el-icon><Top /></el-icon> 重新上架
                                </el-button>
                            </template>
                        </div>
                    </div>
                    </div>

                <!-- 移除旧的 task-board 结构 -->

            </template>

            <!-- 我的订单组件 -->
            <template v-else-if="activeMenu === 'orders'">
                <div class="orders-page">
                    <h2>我的订单</h2>
                    <!-- 将el-tabs改为按钮切换 -->
                    <div class="order-role-buttons">
                        <el-button 
                            :type="orderRoleTab === 'buyer' ? 'primary' : 'default'"
                            @click="orderRoleTab = 'buyer'; handleOrderRoleTabChange(orderRoleTab)"
                            class="role-button"
                        >
                            <el-icon><ShoppingCart /></el-icon> 我购买的
                        </el-button>
                        <el-button 
                            :type="orderRoleTab === 'seller' ? 'primary' : 'default'"
                            @click="orderRoleTab = 'seller'; handleOrderRoleTabChange(orderRoleTab)"
                            class="role-button"
                        >
                            <el-icon><Shop /></el-icon> 我卖出的
                        </el-button>
                    </div>

                    <!-- 使用 transition 包裹订单状态页签和列表 -->
                    <transition name="fade-orders" mode="out-in">
                        <div :key="orderRoleTab"> <!-- key 很重要，用于触发 transition -->
                            <el-tabs v-model="orderActiveTab" @tab-change="handleOrderStatusTabChange">
                        <el-tab-pane label="全部" name="all">
                            <order-list :orders="filteredOrders" />
                        </el-tab-pane>
                                <el-tab-pane label="待交易" name="1"> <!-- 原来的待发货和待收货合并为待交易 -->
                            <order-list :orders="filteredOrders" />
                        </el-tab-pane>
                                <el-tab-pane label="待评价" name="4"> <!-- 新增待评价状态 -->
                            <order-list :orders="filteredOrders" />
                        </el-tab-pane>
                                <el-tab-pane label="已完成" name="2"> <!-- COMPLETED -> 2 -->
                            <order-list :orders="filteredOrders" />
                        </el-tab-pane>
                        <el-tab-pane label="已取消" name="3"> <!-- 增加已取消选项卡 -->
                            <order-list :orders="filteredOrders" />
                        </el-tab-pane>
                    </el-tabs>
                            <!-- 加载更多等也应在此 div 内，以一同参与动画 -->
                            <div v-if="orderStore.loading" class="loading-state" style="text-align: center; padding: 20px;">
                                <el-icon class="is-loading" size="24"><Loading /></el-icon> <span>加载中...</span>
                            </div>
                            <div v-else-if="!orderStore.loading && pagination.orders.hasMore && filteredOrders.length > 0" class="load-more" @click="loadMore('orders')">
                                加载更多
                            </div>
                            <!-- 移除重复的空状态显示，因为OrderList组件已经包含了空状态 -->
                        </div>
                    </transition>
                </div>
            </template>

            <!-- 我的收藏组件 -->
            <template v-if="activeMenu === 'favorites'">
                <div class="favorites-page">
                    <h2>我的收藏</h2>
                    
                    <!-- 添加切换Tab：商品/求购信息 -->
                    <el-tabs v-model="favoritesActiveTab" @tab-change="handleFavoritesTabChange">
                        <el-tab-pane label="商品收藏" name="products">
                            <el-row :gutter="20">
                                <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="product in userStore.favorites" :key="product.id">
                                    <div :class="['task-card']" @click="handleViewProduct(product)" style="cursor: pointer;">
                                        <!-- 商品图片容器 -->
                                        <div class="card-image-container">
                                            <img 
                                                :src="getProductImageUrl(product)" 
                                                :alt="product.title" 
                                                class="card-image"
                                            />
                                        </div>

                                        <!-- 卡片内部结构 -->
                                        <div class="card-content-area"> 
                                            <div class="card-tags">
                                                <span v-if="product.viewCount > 100" class="tag normal">热门</span>
                                                <span v-if="product.isDiscounted" class="tag important">降价</span>
                                            </div>
                                            <h3 class="card-title">{{ product.title || product.name }}</h3>
                                            <div class="card-price">
                                                ￥{{ product.price }}
                                                <span v-if="product.originalPrice" class="original-price">￥{{ product.originalPrice }}</span>
                                            </div>
                                            <div class="card-meta">
                                                <div class="date">
                                                    <el-icon><Calendar /></el-icon>
                                                    <span>已发布 {{ getDaysSince(product.createdAt) }}天</span>
                                                </div>
                                                <div class="comments">
                                                    <el-icon><ChatDotRound /></el-icon>
                                                    <span>{{ product.commentCount || 0 }} 条留言</span>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <!-- 底部操作按钮区域 -->
                                        <div class="card-footer-actions">
                                            <router-link :to="`/product/${product.id}`">
                                                <el-button type="primary" size="small">查看</el-button>
                                            </router-link>
                                            <el-button type="danger" size="small" @click.stop="userStore.toggleFavorite(product)">取消收藏</el-button>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                            <div v-if="userStore.favoritesLoading" class="loading-container">
                                <el-skeleton :rows="3" animated />
                            </div>
                            <el-empty v-if="!userStore.favorites.length && !userStore.favoritesLoading" description="暂无收藏商品" />
                        </el-tab-pane>
                        
                        <el-tab-pane label="求购收藏" name="requests">
                            <div class="buying-cards-grid">
                                <div v-for="request in favoritePurchaseRequests" 
                                    :key="request.id" 
                                    class="buying-card">
                                    
                                    <!-- 求购标题和分类 -->
                                    <div class="buying-header">
                                        <h3 class="buying-title">{{ request.title || '无标题' }}</h3>
                                        <div class="buying-category" v-if="request.categoryName">
                                            <el-tag size="small" type="info" effect="plain">{{ request.categoryName }}</el-tag>
                                        </div>
                                    </div>
                                    
                                    <!-- 预算信息 -->
                                    <div class="buying-budget-top">
                                        <span class="budget-label">预算:</span>
                                        <span class="price">¥{{ request.budget || 0 }}</span>
                                    </div>
                                    
                                    <!-- 求购描述 -->
                                    <p class="buying-description">{{ request.description || '无描述' }}</p>
                                    
                                    <!-- 时间与学校信息 -->
                                    <div class="buying-meta">
                                        <div class="buying-user">
                                            <el-icon><Calendar /></el-icon>
                                            <span class="buying-time">{{ request.time || formatDate(request.createTime) || '未知时间' }}</span>
                                        </div>
                                        <div class="buying-school">
                                            <el-icon><Location /></el-icon>
                                            <span>{{ request.user?.school || '未知学校' }}</span>
                                        </div>
                                    </div>
                                    
                                    <!-- 操作按钮 -->
                                    <div class="buying-footer">
                                        <div class="buying-actions">
                                            <router-link :to="`/requests/${request.id}`">
                                                <el-button size="small" type="primary">查看</el-button>
                                            </router-link>
                                            <el-button type="danger" size="small" @click.stop="toggleFavoritePurchaseRequest(request)">取消收藏</el-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-if="favoritePurchaseRequestsLoading" class="loading-container">
                                <el-skeleton :rows="3" animated />
                            </div>
                            <el-empty v-if="!favoritePurchaseRequests.length && !favoritePurchaseRequestsLoading" description="暂无收藏的求购信息" />
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </template>



            <!-- 设置 -->
            <template v-else-if="activeMenu === 'settings'">
                <div class="header">
                    <div class="page-title">设置</div>
                </div>
                <div class="settings-section">
                    <h3 class="section-title">账号设置</h3>
                    <div class="settings-item">
                        <span>修改密码</span>
                        <el-icon><ArrowRight /></el-icon>
                    </div>
                    <div class="settings-item">
                        <span>隐私设置</span>
                        <el-icon><ArrowRight /></el-icon>
                    </div>
                    <div class="settings-item">
                        <span>通知设置</span>
                        <el-icon><ArrowRight /></el-icon>
                    </div>
                </div>
                <div class="settings-section">
                    <h3 class="section-title">系统设置</h3>
                    <div class="settings-item">
                        <span>主题设置</span>
                        <el-switch v-model="darkMode" />
                    </div>
                    <div class="settings-item">
                        <span>语言设置</span>
                        <el-select v-model="language" size="small" style="width: 100px">
                            <el-option label="简体中文" value="zh-CN" />
                            <el-option label="English" value="en-US" />
                        </el-select>
                    </div>
                </div>
            </template>

            <!-- 个人资料 -->
            <template v-else-if="activeMenu === 'profile'">
                <div class="header">
                    <div class="page-title">个人资料</div>
                    <div class="header-actions" v-if="!isProfileEditing && !isVisitorMode">
                        <el-button type="primary" @click="handleProfileEdit" round>
                            编辑
                        </el-button>
                </div>
                    <div class="header-actions" v-else-if="isProfileEditing">
                        <el-button @click="handleProfileCancel" round>取消</el-button>
                        <el-button type="primary" @click="handleProfileSave" round>保存</el-button>
                    </div>
                </div>
                
                <div class="profile-content full-width">
                    <el-form 
                        ref="profileFormRef"
                        :model="profileForm"
                        :rules="profileRules"
                        label-position="top"
                        :disabled="!isProfileEditing || isVisitorMode"
                        class="profile-form"
                    >
                        <div class="profile-grid-layout">
                            <!-- 用户头像部分 -->
                            <div class="profile-header-card">
                                <div class="avatar-upload-container">
                                    <div class="avatar-wrapper">
                                        <img 
                                            :src="'/images/user/' + profileForm.avatar || 'https://via.placeholder.com/120'" 
                                            alt="用户头像" 
                                            class="profile-avatar"
                                        />
                                        <div v-if="isProfileEditing" class="avatar-overlay" @click="handleAvatarClick">
                                            <el-icon><Camera /></el-icon>
                                            <span>更换头像</span>
                                        </div>
                                        <input
                                            ref="avatarInput"
                                            type="file"
                                            accept="image/*"
                                            style="display: none"
                                            @change="handleAvatarChange"
                                        />
                                    </div>
                                    <div class="user-nickname">
                                        {{ profileForm.nickname || '用户昵称' }}
                                    </div>
                                    <div class="user-status">
                                        <el-tag size="small" type="success" effect="dark" round>已认证用户</el-tag>
                                    </div>
                                    <div class="user-stats">
                                        <div class="stat-item">
                                            <div class="stat-value">{{ userStore.products?.length || 0 }}</div>
                                            <div class="stat-label">发布商品</div>
                                        </div>
                                        <div class="stat-item">
                                            <div class="stat-value">{{ userStore.favorites?.length || 0 }}</div>
                                            <div class="stat-label">收藏商品</div>
                                        </div>
                                        <div class="stat-item">
                                            <div class="stat-value">{{ orderStore.orders?.length || 0 }}</div>
                                            <div class="stat-label">订单数量</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 个人信息卡片 -->
                            <div class="ios-card">
                                <div class="ios-card-header">
                                    <h3>个人信息</h3>
                                </div>
                                <div class="ios-card-content">
                                    <div class="ios-form-group">
                                        <label class="ios-form-label">
                                            昵称 <span class="required-mark">*</span>
                                        </label>
                                        <div class="ios-form-input">
                                            <el-input 
                                                v-model="profileForm.nickname" 
                                                placeholder="请输入昵称"
                                                class="ios-input"
                                            />
                                        </div>
                                    </div>
                                    
                                    <div class="ios-separator"></div>
                                    
                                    <div class="ios-form-group">
                                        <label class="ios-form-label">
                                            性别 <span class="required-mark">*</span>
                                        </label>
                                        <div class="ios-form-input">
                                            <el-radio-group v-model="profileForm.gender" class="ios-radio-group">
                                                <el-radio label="male">男</el-radio>
                                                <el-radio label="female">女</el-radio>
                                                <el-radio label="other">其他</el-radio>
                                            </el-radio-group>
                                        </div>
                                    </div>
                                    
                                    <div class="ios-separator"></div>
                                    
                                    <div class="ios-form-group">
                                        <label class="ios-form-label">年龄</label>
                                        <div class="ios-form-input">
                                            <el-input-number
                                                v-model="profileForm.age"
                                                :min="1"
                                                :max="120"
                                                placeholder="请输入年龄"
                                                class="ios-input-number"
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 教育信息卡片 -->
                            <div class="ios-card">
                                <div class="ios-card-header">
                                    <h3>教育信息</h3>
                                </div>
                                <div class="ios-card-content">
                                    <div class="ios-form-group">
                                        <label class="ios-form-label">
                                            学校 <span class="required-mark">*</span>
                                        </label>
                                        <div class="ios-form-input">
                                            <el-select 
                                                v-model="profileForm.school" 
                                                placeholder="请选择学校" 
                                                class="ios-select"
                                            >
                                                <el-option 
                                                    v-for="item in schools" 
                                                    :key="item.id" 
                                                    :label="item.name" 
                                                    :value="item.id" 
                                                />
                                            </el-select>
                                        </div>
                                    </div>
                                    
                                    <div class="ios-separator"></div>
                                    
                                    <div class="ios-form-group">
                                        <label class="ios-form-label">
                                            专业 <span class="required-mark">*</span>
                                        </label>
                                        <div class="ios-form-input">
                                            <el-input 
                                                v-model="profileForm.major" 
                                                placeholder="请输入专业"
                                                class="ios-input"
                                            />
                                        </div>
                                    </div>
                                    
                                    <div class="ios-separator"></div>
                                    
                                    <div class="ios-form-group">
                                        <label class="ios-form-label">
                                            年级 <span class="required-mark">*</span>
                                        </label>
                                        <div class="ios-form-input">
                                            <el-select 
                                                v-model="profileForm.grade" 
                                                placeholder="请选择年级" 
                                                class="ios-select"
                                            >
                                                <el-option 
                                                    v-for="item in grades" 
                                                    :key="item.value" 
                                                    :label="item.label" 
                                                    :value="item.value" 
                                                />
                                            </el-select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                                
                            <!-- 联系方式卡片 -->
                            <div class="ios-card">
                                <div class="ios-card-header">
                                    <h3>联系方式</h3>
                                </div>
                                <div class="ios-card-content">
                                    <div class="ios-form-group">
                                        <label class="ios-form-label">手机号码</label>
                                        <div class="ios-form-input">
                                            <div class="ios-locked-input" v-if="!isProfileEditing">
                                                {{ userStore.userInfo.phone || '未设置' }}
                                            </div>
                                            <el-input 
                                                v-else 
                                                v-model="profileForm.phone" 
                                                placeholder="请输入手机号码"
                                                class="ios-input"
                                            />
                                        </div>
                                    </div>
                                    
                                    <div class="ios-separator"></div>
                                    
                                    <div class="ios-form-group">
                                        <label class="ios-form-label">电子邮箱</label>
                                        <div class="ios-form-input">
                                            <div class="ios-locked-input" v-if="!isProfileEditing">
                                                {{ userStore.userInfo.email || '未设置' }}
                                            </div>
                                            <el-input 
                                                v-else 
                                                v-model="profileForm.email" 
                                                placeholder="请输入电子邮箱"
                                                class="ios-input"
                                            />
                                        </div>
                                    </div>
                                    
                                    <div class="ios-separator"></div>
                                    
                                    <div class="ios-form-group">
                                        <label class="ios-form-label">所在地区</label>
                                        <div class="ios-form-input">
                                            <div class="ios-locked-input" v-if="!isProfileEditing">
                                                {{ userStore.userInfo.location || '未设置' }}
                                            </div>
                                            <el-input 
                                                v-else 
                                                v-model="profileForm.location" 
                                                placeholder="请输入所在地区"
                                                class="ios-input"
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 个人简介卡片 -->
                            <div class="ios-card">
                                <div class="ios-card-header">
                                    <h3>个人简介</h3>
                                </div>
                                <div class="ios-card-content">
                                    <div class="ios-form-group">
                                        <div class="ios-form-input">
                                            <el-input 
                                                v-model="profileForm.bio" 
                                                type="textarea" 
                                                :rows="6" 
                                                placeholder="介绍一下自己吧" 
                                                class="ios-textarea"
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 用户信誉卡片 -->
                            <div class="ios-card">
                                <div class="ios-card-header">
                                    <h3>用户信誉</h3>
                                </div>
                                <div class="ios-card-content">
                                    <div class="reputation-info">
                                        <div class="reputation-level">
                                            <el-progress type="dashboard" :percentage="userReputation" :color="reputationColorMap" :stroke-width="8">
                                                <div class="progress-content">
                                                    <span class="progress-value">{{ userReputation }}</span>
                                                    <span class="progress-label">信誉度</span>
                                                </div>
                                            </el-progress>
                                        </div>
                                        <div class="rating-stars">
                                            <el-rate
                                                v-model="userRating"
                                                disabled
                                                show-score
                                                text-color="#ff9900"
                                                score-template="{value}"
                                            />
                                            <div class="rating-text">用户评分</div>
                                        </div>
                                    </div>
                                    <div class="ios-separator"></div>
                                    <div class="last-transaction">
                                        <div class="last-transaction-title">最近成交</div>
                                        <div class="last-transaction-time">{{ lastTransactionTime || '暂无成交记录' }}</div>
                                    </div>
                                    <div class="ios-separator"></div>
                                    <div class="activity-summary">
                                        <div class="summary-item">
                                            <div class="summary-label">成交量</div>
                                            <div class="summary-value">{{ totalTransactions || 0 }}</div>
                                        </div>
                                        <div class="summary-item">
                                            <div class="summary-label">好评率</div>
                                            <div class="summary-value">{{ positiveRate || '0%' }}</div>
                                        </div>
                                        <div class="summary-item">
                                            <div class="summary-label">买家保障</div>
                                            <div class="summary-value">
                                                <el-tag size="small" type="success" v-if="hasBuyerProtection">已开启</el-tag>
                                                <el-tag size="small" type="info" v-else>未开启</el-tag>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-form>
                </div>
            </template>

            <!-- 我的求购组件 -->
            <template v-else-if="activeMenu === 'buying'">
                <div class="header">
                    <div class="page-title">{{ isVisitorMode ? '发布的求购' : '我的求购' }}</div>
                    <div class="header-actions" v-if="!isVisitorMode">
                        <el-icon class="more-icon"><More /></el-icon>
                    </div>
                </div>

                <!-- 选项卡导航 -->
                <div class="tabs">
                    <div class="tab" :class="{ active: buyingActiveTab === 'all' }" @click="handleBuyingTabChange('all')">全部</div>
                    <div class="tab" :class="{ active: buyingActiveTab === 'active' }" @click="handleBuyingTabChange('active')">进行中</div>
                    <div class="tab" :class="{ active: buyingActiveTab === 'completed' }" @click="handleBuyingTabChange('completed')" v-if="!isVisitorMode">已完成</div>
                    <div class="tab" :class="{ active: buyingActiveTab === 'draft' }" @click="handleBuyingTabChange('draft')" v-if="!isVisitorMode">草稿箱</div>
                </div>


                <!-- 使用网格布局显示求购信息 -->
                <div class="buying-list-container">
                    <div v-if="buyingRequestsLoading" class="loading-container">
                        <el-skeleton :rows="3" animated />
                    </div>
                    <el-empty v-else-if="displayedBuyingRequests.length === 0" description="暂无求购信息" />
                    
                    <div class="buying-cards-grid">
                        <div v-for="request in displayedBuyingRequests" 
                            :key="request.id" 
                            class="buying-card">
                            
                            <!-- 求购标题和分类 -->
                            <div class="buying-header">
                                <h3 class="buying-title">{{ request.title || '无标题' }}</h3>
                                <div class="buying-category" v-if="request.categoryName">
                                    <el-tag size="small" type="info" effect="plain">{{ request.categoryName }}</el-tag>
                                </div>
                            </div>
                            
                            <!-- 预算信息 -->
                            <div class="buying-budget-top">
                                <span class="budget-label">预算:</span>
                                <span class="price">¥{{ request.budget || 0 }}</span>
                            </div>
                            
                            <!-- 求购描述 -->
                            <p class="buying-description">{{ request.description || '无描述' }}</p>
                            
                            <!-- 时间与学校信息 -->
                            <div class="buying-meta">
                                <div class="buying-user">
                                    <el-icon><Calendar /></el-icon>
                                    <span class="buying-time">{{ request.time || formatDate(request.createTime) || '未知时间' }}</span>
                                </div>
                                <div class="buying-school">
                                    <el-icon><Location /></el-icon>
                                    <span>{{ request.user?.school || '未知学校' }}</span>
                                </div>
                            </div>
                            
                            <!-- 操作按钮 -->
                            <div class="buying-footer">
                                <div class="buying-actions">
                                    <router-link :to="`/requests/${request.id}`" v-if="isVisitorMode">
                                        <el-button size="small" type="primary">查看</el-button>
                                    </router-link>
                                    <template v-else>
                                        <el-button v-if="request.status !== 0" size="small" type="warning" @click="handleEditRequest(request)">编辑</el-button>
                                        <el-button v-if="request.status === 2" size="small" type="success" @click="handlePublishDraft(request)">发布</el-button>
                                        <el-button size="small" type="danger" @click="handleDeleteRequest(request)">删除</el-button>
                                    </template>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </template>

            <!-- 分页 -->
            <div v-if="!buyingRequestsLoading && totalRequests > 0" class="pagination-container">
                <el-pagination
                    layout="prev, pager, next"
                    :current-page="currentRequestPage"
                    :page-size="requestPageSize"
                    :total="totalRequests"
                    @current-change="handleRequestPageChange"
                />
            </div>

            <!-- 发布求购对话框 -->
            <el-dialog
                v-model="showRequestDialog"
                :title="editingRequest ? '编辑求购' : '发布求购'"
                width="40%"
                :destroy-on-close="true"
                class="apple-style-dialog"
            >
                <el-form :model="requestForm" label-position="left" label-width="120px" ref="requestFormRef">
                    <el-row :gutter="20">
                        <el-col :span="20">
                            <el-form-item label="求购标题" prop="title" :rules="[
                                { required: true, message: '请输入求购标题', trigger: 'blur' }
                            ]">
                                <el-input v-model="requestForm.title" placeholder="请输入求购标题" class="apple-style-input" style="width: 80%;" />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item label="求购内容" prop="description" :rules="[
                        { required: true, message: '请输入求购内容', trigger: 'blur' }
                    ]">
                        <el-input 
                            v-model="requestForm.description" 
                            type="textarea" 
                            rows="4"
                            placeholder="详细描述您需要的物品、参数要求等" 
                            class="apple-style-textarea"
                        />
                    </el-form-item>

                    <el-row :gutter="20">
                        <el-col :span="14">
                            <el-form-item label="求购分类" prop="categoryId" :rules="[
                                { required: true, message: '请选择分类', trigger: 'change' }
                            ]">
                                <el-select v-model="requestForm.categoryId" placeholder="选择分类" class="apple-style-select" style="width: 100%;">
                                    <el-option
                                        v-for="item in categoryOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                        
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="预算" prop="budget" :rules="[
                                { required: true, message: '请输入预算', trigger: 'blur' }
                            ]">
                                <el-input-number v-model="requestForm.budget" :min="0" :step="10" :precision="0" class="apple-style-input-number" style="width: 100%;" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="过期时间" prop="expireTime">
                                <el-date-picker
                                    v-model="requestForm.expireTime"
                                    type="datetime"
                                    placeholder="选择过期时间"
                                    style="width: 100%;"
                                    class="apple-style-select"
                                    format="YYYY-MM-DD HH:mm:ss"
                                    value-format="YYYY-MM-DD HH:mm:ss"
                                    :clearable="true"
                                    :editable="false"
                                    :disabled-date="(time) => time.getTime() < Date.now() - 8.64e7"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item label="联系信息" prop="contactInfo">
                        <el-input v-model="requestForm.contactInfo" placeholder="请输入您的联系方式 (如QQ, 微信, 电话)" class="apple-style-input" style="width: 100%;" />
                    </el-form-item>

                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button class="apple-style-btn cancel-btn" @click="showRequestDialog = false">取消</el-button>
                        <el-button class="apple-style-btn" @click="handleRequestSubmit('draft')" :loading="requestSubmitting === 'draft'">
                            存为草稿
                        </el-button>
                        <el-button class="apple-style-btn confirm-btn" type="primary" @click="handleRequestSubmit('active')" :loading="requestSubmitting === 'active'">
                            发布
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, onUnmounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { useOrderStore } from '@/stores/order'
import request from '@/utils/request'
import { ElMessage, ElMessageBox } from 'element-plus'
import { createPurchaseRequest, updatePurchaseRequest, deletePurchaseRequest } from '@/api/request'
import { PurchaseRequestItem } from '@/types/request'
import { getImageUrl } from '@/utils/image'

// 获取商品展示图片的方法，处理不同的图片字段情况
const getProductImageUrl = (product) => {
    // 1. 检查是否有mainImageUrl字段
    if (product.mainImageUrl) {
        // 判断是完整URL还是文件名
        return typeof product.mainImageUrl === 'string' && product.mainImageUrl.startsWith('http')
            ? product.mainImageUrl 
            : `/images/product/${product.mainImageUrl}`;
    }
    
    // 2. 检查是否有images数组且有内容
    if (product.images && product.images.length > 0) {
        const firstImage = product.images[0];
        // 判断是完整URL还是文件名
        return typeof firstImage === 'string' && firstImage.startsWith('http')
            ? firstImage
            : `/images/product/${firstImage}`;
    }
    
    // 3. 检查其他可能的图片字段
    const imageField = product.image || product.coverImage || product.imgUrl;
    if (imageField) {
        return typeof imageField === 'string' && imageField.startsWith('http')
            ? imageField
            : `/images/product/${imageField}`;
    }
    
    // 4. 都没有则返回默认占位图
    return `https://api.dicebear.com/7.x/shapes/svg?seed=${product.id || 'product'}&backgroundColor=007AFF`;
}

// 获取用户的求购列表
async function getUserPurchaseRequests(userId: number, params: any = {}) {
  // 将userId作为参数传递，而不是作为URL的一部分
  return request.get('/requests', { 
    params: {
      userId,
      page: params.page || 1,
      pageSize: params.pageSize || 10,
      ...params
    } 
  })
}

import { 
    User, 
    Calendar, 
    ChatDotRound, 
    Setting,
    Plus,
    More,
    ArrowDown,
    View,
    Goods,
    List,
    Star,
    Loading,
    ArrowRight,
    Search,
    Delete,
    Edit,
    Phone,
    Location,
    ShoppingCart,
    Camera,
    MessageBox,
    Close,
    RemoveFilled,
    Top
} from '@element-plus/icons-vue'
import { type TabPaneName } from 'element-plus'
import OrderList from '@/components/order/OrderList.vue'
import type { FormInstance, FormRules, UploadFile } from 'element-plus'
import {
    getUserProducts,
    getUserOrders,
    getUserFavorites,
    getUserFavoriteRequests,
    getUserPurchaseRequests,
    ProductItem, 
    OrderItem, 
    FavoriteItem, 
    FavoriteRequestItem 
} from '@/api/user'
import { getImageUrl } from '@/utils/image';
import { createPurchaseRequest, updatePurchaseRequest, deletePurchaseRequest } from '@/api/request'
import { PurchaseRequestItem } from '@/types/request'
import { ElMessageBox } from 'element-plus'

// -- 新增选项数据 --
// 成色选项
const conditionOptions = [
    { value: '10', label: '全新' },
    { value: '9.9', label: '九九新' },
    { value: '9.5', label: '九五新' },
    { value: '9', label: '九成新' },
    { value: '8.5', label: '八五新' },
    { value: '8', label: '八成新' },
    { value: '7', label: '七成新及以下' },
]

// 分类选项 (示例)
const categoryOptions = [
    { value: 'electronics', label: '电子产品' },
    { value: 'books', label: '书籍文具' },
    { value: 'clothing', label: '服饰鞋包' },
    { value: 'daily', label: '日用百货' },
    { value: 'sports', label: '运动户外' },
    { value: 'beauty', label: '美妆护肤' },
    { value: 'other', label: '其他' },
]
// -- 结束新增选项数据 --

// 定义商品类型接口
interface Product {
    id: number;
    title: string;
    price: number;
    originalPrice?: number; // 可选
    description: string;
    status: 'selling' | 'sold' | 'off_shelf' | 'draft' | 'pending'; // 包含所有可能的状态
    createdAt: string;
    updatedAt?: string; // 可选
    viewCount: number;
    commentCount: number;
    images: string[];
    isDiscounted?: boolean; // 可选
    buyer?: string; // 可选
    name?: string; // 兼容旧数据
    createTime?: string; // 兼容旧数据
    views?: number; // 兼容旧数据
    location?: string; // 交易地点
    locationDescription?: string; // 交易地点描述
}

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const orderStore = useOrderStore()

// 黑暗模式切换
const darkMode = ref(false)
// 语言设置
const language = ref('zh-CN')

// 用户信誉相关数据
const userReputation = ref(95) // 默认信誉度95分
const userRating = ref(4.8) // 默认评分4.8星
const lastTransactionTime = ref('2023-06-15 14:30:25')
const totalTransactions = ref(56)
const positiveRate = ref('98%')
const hasBuyerProtection = ref(true)

// 从生日计算年龄
const calculateAgeFromBirthday = (birthday) => {
    if (!birthday) return null;
    
    try {
        const birthDate = new Date(birthday);
        const today = new Date();
        let age = today.getFullYear() - birthDate.getFullYear();
        const monthDiff = today.getMonth() - birthDate.getMonth();
        
        // 如果出生月份大于当前月份，或者出生月份等于当前月份但出生日期大于当前日期，则年龄减1
        if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
            age--;
        }
        
        return age >= 0 ? age : null;
    } catch (e) {
        console.error('年龄计算错误:', e);
        return null;
    }
}

// 学校选项
const schoolOptions = [
  { value: '北京大学', label: '北京大学' },
  { value: '清华大学', label: '清华大学' },
  { value: '中国人民大学', label: '中国人民大学' },
  { value: '北京师范大学', label: '北京师范大学' },
  { value: '浙江大学', label: '浙江大学' },
  { value: '复旦大学', label: '复旦大学' }
]

// 信誉度颜色映射 - 使用数组格式
const reputationColorMap = [
  { color: '#f56c6c', percentage: 0 },
  { color: '#e6a23c', percentage: 60 },
  { color: '#409eff', percentage: 80 },
  { color: '#67c23a', percentage: 90 }
]

// 用户个人资料
const profileFormRef = ref()
const isProfileEditing = ref(false)

// 收藏数据
const favoriteLoading = ref(false)

// 模拟收藏数据
const mockFavorites = ref([
    { 
        id: 1, 
        name: 'MacBook Pro 2021', 
        price: 9800, 
        image: 'https://img.alicdn.com/imgextra/i1/2249662466/O1CN01SWVJfn1LtCyPSLF3t_!!2249662466.jpg',
        condition: '9成新',
        description: 'M1芯片，16GB内存，512GB SSD，性能强劲',
        school: '清华大学',
        date: '5月25日'
    },
    { 
        id: 2, 
        name: 'iPhone 14 Pro', 
        price: 6999, 
        image: 'https://img14.360buyimg.com/n0/jfs/t1/122161/35/36440/38778/643f8724F43bcfc58/e7b20184c090583a.jpg',
        condition: '8成新',
        description: '256GB存储，暗夜紫色，配件齐全',
        school: '北京大学',
        date: '5月28日'
    },
    { 
        id: 3, 
        name: '华为MateBook 14', 
        price: 5599, 
        image: 'https://img14.360buyimg.com/n0/jfs/t1/112566/13/42222/53675/65c8c2b1Fc313b759/cf7aca2f2d0edc15.jpg',
        condition: '全新',
        description: 'i5处理器，16GB内存，512GB SSD，轻薄便携',
        school: '清华大学',
        date: '5月30日'
    },
    { 
        id: 4, 
        name: '索尼WH-1000XM4耳机', 
        price: 2299, 
        image: 'https://img14.360buyimg.com/n0/jfs/t1/111867/15/35046/45854/64a54a90F50254915/c6f42e00e2e52afc.jpg',
        condition: '9.5成新',
        description: '降噪耳机，音质出色，带原装配件',
        school: '北京大学',
        date: '5月31日'
    },
    { 
        id: 5, 
        name: '小米手环8', 
        price: 239, 
        image: 'https://img14.360buyimg.com/n0/jfs/t1/218756/26/32642/35653/6475c97cF81a9e95c/10a2c32424abbda9.jpg',
        condition: '全新',
        description: '全新未拆封，彩色屏幕，多功能监测',
        school: '复旦大学',
        date: '6月1日'
    },
    { 
        id: 6, 
        name: '微软Xbox手柄', 
        price: 499, 
        image: 'https://img14.360buyimg.com/n0/jfs/t1/19787/9/20662/68385/65f0c76dFb4be909d/0c5b76e6e26bb9ed.jpg',
        condition: '7成新',
        description: '蓝牙连接，支持PC和Xbox，按键灵敏',
        school: '浙江大学',
        date: '6月2日'
    }
])



// 分页控制
const pagination = reactive({
    products: { page: 1, pageSize: 10, hasMore: true },
    orders: { page: 1, pageSize: 10, hasMore: true },
    favorites: { page: 1, pageSize: 10, hasMore: true },
    buying: {
        currentPage: 1,
        pageSize: 10,
        hasMore: true
    }
})

// 页面标题映射
const pageTitleMap = {
    'profile': '个人资料',
    'orders': '我的订单',
    'favorites': '我的收藏',
    'settings': '设置',
    'buying': '我的求购'
}

// 当前激活的菜单项 - 使用ref而不是computed，以便直接修改
const activeMenu = ref('products')
// 当前激活的标签 - 确保初始化为'all'
const activeTab = ref<Product['status'] | 'all'>('all');

// 筛选相关数据
const sortOption = ref('最新发布');
const schoolFilter = ref('');
const statusFilter = ref('');

// 筛选方法
const handleSortSelect = (command) => {
    sortOption.value = command;
    // 这里可以添加筛选逻辑
};

const handleSchoolSelect = (command) => {
    schoolFilter.value = command;
    // 这里可以添加筛选逻辑
};

const handleStatusSelect = (command) => {
    statusFilter.value = command;
    // 这里可以添加筛选逻辑
};

// 初始化当前菜单
const initActiveMenu = () => {
    const path = route.path.split('/').pop() || ''
    if (path === 'center') {
        activeMenu.value = 'products' // 用户中心默认显示为商品
    } else if (pageTitleMap[path]) {
        activeMenu.value = path
    }
}
// 初始化
initActiveMenu()

// 订单相关
const orderActiveTab = ref('all')

// 根据标签筛选订单
const filteredOrders = computed(() => {
    if (!userStore.userInfo || !userStore.userInfo.id) {
        console.warn('User info or ID is missing for filtering orders.');
        return [];
    }
    const currentUserId = String(userStore.userInfo.id); // 确保是字符串比较（如果需要）

    let ordersByRole = [];

    if (orderRoleTab.value === 'buyer') {
        ordersByRole = orderStore.orders.filter(order => String(order.buyerId) === currentUserId);
    } else if (orderRoleTab.value === 'seller') {
        // 假设卖家ID字段是 sellerId
        ordersByRole = orderStore.orders.filter(order => String(order.sellerId) === currentUserId);
    } else {
        ordersByRole = orderStore.orders; // 如果有其他角色或默认情况
    }

    if (orderActiveTab.value === 'all') {
        return ordersByRole;
    }
    // 确保 order.status 的类型与 orderActiveTab.value (转换后的数字) 一致
    return ordersByRole.filter(order => String(order.status) === orderActiveTab.value);
});

// 收藏相关
const addToCart = (product) => {
    userStore.addToCart(product)
}

const removeFromFavorites = (product) => {
    userStore.toggleFavorite(product)
}

// 个人资料相关
const profileForm = reactive({
    avatar: userStore.userInfo.avatar,
    nickname: userStore.userInfo.nickname,
    gender: userStore.userInfo.gender,
    age: userStore.userInfo.age || calculateAgeFromBirthday(userStore.userInfo.birthday) || 18,
    school: userStore.userInfo.school,
    major: userStore.userInfo.major,
    grade: userStore.userInfo.grade,
    bio: userStore.userInfo.bio,
    // 添加新的字段
    phone: userStore.userInfo.phone || '',
    email: userStore.userInfo.email || '',
    location: userStore.userInfo.location || ''
})

// 表单验证规则
const profileRules = reactive({
    nickname: [
        { required: true, message: '请输入昵称', trigger: 'blur' },
        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
    ],
    gender: [
        { required: true, message: '请选择性别', trigger: 'change' }
    ],
    school: [
        { required: true, message: '请选择学校', trigger: 'change' }
    ],
    major: [
        { required: true, message: '请输入专业', trigger: 'blur' }
    ],
    grade: [
        { required: true, message: '请选择年级', trigger: 'change' }
    ]
})

// 学校列表
const schools = [
    { id: 1, name: '北京大学' },
    { id: 2, name: '清华大学' },
    { id: 3, name: '复旦大学' },
    { id: 4, name: '浙江大学' }
]

// 年级列表
const grades = [
    { value: 'freshman', label: '大一' },
    { value: 'sophomore', label: '大二' },
    { value: 'junior', label: '大三' },
    { value: 'senior', label: '大四' },
    { value: 'graduate', label: '研究生' }
]

// 处理编辑个人资料
const handleProfileEdit = () => {
    isProfileEditing.value = true
}

// 处理保存个人资料
const handleProfileSave = async () => {
    if (!profileFormRef.value) return

    await profileFormRef.value.validate(async (valid) => {
        if (valid) {
            try {
                // 构建提交数据
                const submitData = { ...profileForm };
                
                // 确保年龄字段有合适的值
                if (!submitData.age || isNaN(submitData.age)) {
                    submitData.age = 18; // 设置默认年龄
                }
                
                // 从年龄生成生日信息（如果后端仍需要生日字段）
                const today = new Date();
                const birthYear = today.getFullYear() - submitData.age;
                submitData.birthday = `${birthYear}-01-01`; // 使用1月1日作为默认日期
                
                // 如果是Base64格式的头像预览而不是File对象，需要确保不提交这个格式的字符串
                if (typeof submitData.avatar === 'string' && submitData.avatar.startsWith('data:image')) {
                    // 如果有avatarFile则使用avatarFile，否则不传avatar
                    if (!submitData.avatarFile) {
                        delete submitData.avatar;
                    }
                }
                
                // 调用更新用户信息的API
                await userStore.updateUserInfo(submitData);
                ElMessage.success('保存成功');
                isProfileEditing.value = false;
            } catch (error) {
                ElMessage.error('保存失败');
            }
        }
    });
}

// 处理取消编辑个人资料
const handleProfileCancel = () => {
    // 重置表单数据
    Object.assign(profileForm, userStore.userInfo)
    isProfileEditing.value = false
}

// 处理头像上传成功
const handleAvatarSuccess = (response) => {
    profileForm.avatar = response.url
    ElMessage.success('头像上传成功')
}

// 上传头像前的验证
const beforeAvatarUpload = (file) => {
    const isJPGOrPNG = file.type === 'image/jpeg' || file.type === 'image/png'
    const isLt2M = file.size / 1024 / 1024 < 2

    if (!isJPGOrPNG) {
        ElMessage.error('上传头像图片只能是 JPG/PNG 格式!')
    }
    if (!isLt2M) {
        ElMessage.error('上传头像图片大小不能超过 2MB!')
    }

    return isJPGOrPNG && isLt2M
}

// 处理菜单选择 - 不再跳转路由，直接更新activeMenu
const handleMenuSelect = (index: string) => {
    // 如果是访客模式，限制只能访问商品、求购和个人资料页面
    if (isVisitorMode.value && index !== 'products' && index !== 'buying' && index !== 'profile') {
        ElMessage.warning('访客模式下无法访问此功能')
        return
    }
    
    console.log('菜单切换: 从', activeMenu.value, '到', index)
    activeMenu.value = index
    
    // 根据选择的菜单项加载对应的数据
    console.log('开始加载菜单数据:', index)
    loadDataByMenu(index)
}

// 根据菜单加载对应的数据
const loadDataByMenu = async (menu: string) => {
    if (!userStore.isLoggedIn) {
        ElMessage.warning('请先登录')
        router.push('/login')
        return
    }
    
    switch (menu) {
        case 'products':
            if (userStore.products.length === 0) {
                await userStore.getUserProducts({ page: 1, pageSize: pagination.products.pageSize })
            }
            break
        case 'orders':
            pagination.orders.page = 1; // 重置分页
            await fetchOrdersForCurrentRoleAndStatus(); // 调用新的辅助函数
            break
        case 'favorites':
            if (userStore.favorites.length === 0) {
                console.log('开始加载收藏列表数据...');
                await userStore.getUserFavorites();
                console.log('收藏列表数据加载完成，数据条数:', userStore.favorites.length);
                
                // 如果当前是求购信息Tab，加载收藏的求购信息
                if (favoritesActiveTab.value === 'requests' && favoritePurchaseRequests.value.length === 0) {
                    await fetchFavoritePurchaseRequests();
                }
            }
            break

        case 'profile':
            // 确保用户资料是最新的
            await userStore.getUserProfile()
            // 更新表单数据
            Object.assign(profileForm, userStore.userInfo)
            break
        case 'buying':
            if (buyingRequests.value.length === 0) {
                await fetchBuyingRequests({ page: 1, pageSize: pagination.buying.pageSize })
            }
            break
    }
}

// 处理加载更多数据
const loadMore = async (type: string) => {
    // 如果正在加载或者没有更多数据，则不处理
    switch (type) {
        case 'products':
            if (userStore.productsLoading || !pagination.products.hasMore) return
            pagination.products.page++
            await userStore.getUserProducts({ 
                page: pagination.products.page, 
                pageSize: pagination.products.pageSize 
            })
            // 更新是否有更多数据的标志
            pagination.products.hasMore = userStore.products.length < userStore.productsTotal
            break
        case 'orders':
            if (orderStore.loading || !pagination.orders.hasMore) return
            pagination.orders.page++
            await fetchOrdersForCurrentRoleAndStatus(); // 调用新的辅助函数
            pagination.orders.hasMore = orderStore.orders.length < orderStore.total
            break
        case 'favorites':
            // 用户收藏列表不再需要分页加载，直接一次性加载全部
            if (userStore.favoritesLoading) return
            // 移除调用参数
            await userStore.getUserFavorites()
            break

        case 'buying':
            if (buyingLoading.value || !pagination.buying.hasMore) return
            pagination.buying.currentPage++
            await fetchBuyingRequests({ 
                page: pagination.buying.currentPage, 
                pageSize: pagination.buying.pageSize 
            })
            // 更新是否有更多数据的标志
            pagination.buying.hasMore = buyingRequests.value.length < buyingTotal.value
            break
        // 移除 favoriteRequests 分支，因为已经不需要分页
    }
}



// 处理发布商品
const handlePublishProduct = () => {
    showPublishModal.value = true
}

// 处理查看商品详情
const handleViewProduct = (product) => {
    // 防止点击编辑按钮时触发详情页导航
    if (event.target.closest('.image-edit-button') || event.target.closest('.card-footer-actions')) {
        return;
    }
    
    // 导航到商品详情页
    router.push(`/product/${product.id}`);
}

// 处理编辑商品
const handleEditProduct = (product) => {
    // 阻止事件冒泡，避免触发查看商品详情
    if (event) {
        event.stopPropagation();
    }
    
    // 编辑商品信息的逻辑
    console.log('编辑商品:', product);
    
    // 重置表单数据
    resetPublishForm();
    
    // 设置表单数据 - 使用与学校详情页一致的参数命名
    publishForm.name = product.title || product.name || ''; // 兼容title或name字段
    publishForm.description = product.description || '';
    publishForm.price = parseFloat(product.price) || 0;
    publishForm.originalPrice = parseFloat(product.originalPrice) || 0;
    publishForm.condition = product.condition || '9';
    publishForm.categoryId = parseInt(product.categoryId) || 1; // 使用categoryId代替category
    publishForm.location = product.locationDescription || product.location || '';
    publishForm.coordinates = product.coordinates || null;
    
    // 添加学校ID
    publishForm.schoolId = parseInt(product.schoolId) || 51; // 默认使用51作为学校ID
    
    // 标记当前正在编辑的商品ID
    editingProductId.value = product.id;
    showPublishModal.value = true;
    
    // 清空文件列表并从后端获取商品图片
    fileList.value = [];
    
    // 调用API获取最新的商品图片
    console.log(`从后端请求商品${product.id}的图片...`);
    fetchProductImages(product.id);
}

// 从后端获取商品图片的方法
const fetchProductImages = async (productId) => {
    if (!productId) return;
    
    try {
        // 清空已有图片列表
        fileList.value = [];
        publishForm.images = [];
        
        // 请求商品详细图片信息
        const response = await request.get(`/products/${productId}/images`);
        
        if (response && response.data && Array.isArray(response.data)) {
            const images = response.data;
            
            if (images.length > 0) {
                // 提取图片URL
                const imageUrls = images.map((img) => {
                    // 如果是字符串，直接返回
                    if (typeof img === 'string') return img;
                    // 如果是对象，尝试获取URL
                    return img.imageUrl || img.url || img.image || 
                           img.coverImage || img.imgUrl || img.src || img.path || 
                           (img.image ? img.image : null);
                }).filter((url) => url); // 过滤掉空值
                
                // 更新表单图片
                if (imageUrls.length > 0) {
                    // 将图片URL转为文件列表格式，用于上传组件显示
                    fileList.value = imageUrls.map((url, index) => {
                        // 处理URL显示格式 (显示时添加前缀)
                        const displayUrl = url.startsWith('http') ? url : `/images/product/${url}`;
                        const originalUrl = url; // 保存原始URL
                        
                        // 添加图片到表单数据
                        publishForm.images.push(originalUrl);
                        
                        return {
                            name: `商品图片${index + 1}`,
                            url: displayUrl,
                            uid: `${Date.now()}-${index}`,
                            status: 'success',  // 标记为已上传成功状态
                            // 保存原始URL，用于提交表单时使用
                            originalUrl: originalUrl
                        };
                    });
                    
                    console.log('成功获取商品图片:', imageUrls);
                    console.log('设置到publishForm.images:', publishForm.images);
                    console.log('设置到fileList:', fileList.value);
                    ElMessage.success(`已加载${imageUrls.length}张商品图片`);
                    return; // 成功获取图片后返回
                }
            }
        }
        
        // 如果正规接口获取失败，尝试从商品对象中获取图片
        const product = userStore.products.find(p => p.id === productId);
        if (product) {
            // 统一处理所有可能的图片字段
            const possibleImages = [];
            
            // 优先检查mainImageUrl字段
            if (product.mainImageUrl) {
                possibleImages.push(product.mainImageUrl);
            }
            
            // 然后检查images数组
            if (product.images && Array.isArray(product.images) && product.images.length > 0) {
                possibleImages.push(...product.images);
            }
            
            // 最后检查其他可能的图片字段
            const otherImageFields = ['image', 'coverImage', 'imgUrl'];
            otherImageFields.forEach(field => {
                if (product[field]) possibleImages.push(product[field]);
            });
            
            // 如果有任何图片，使用它们
            if (possibleImages.length > 0) {
                fileList.value = possibleImages.map((url, index) => {
                    const displayUrl = url.startsWith('http') ? url : `/images/product/${url}`;
                    const originalUrl = url; // 保存原始URL
                    
                    // 添加图片到表单数据
                    publishForm.images.push(originalUrl);
                    
                    return {
                        name: `商品图片${index + 1}`,
                        url: displayUrl,
                        uid: `${Date.now()}-${index}`,
                        status: 'success',
                        // 保存原始URL，用于提交表单时使用
                        originalUrl: originalUrl
                    };
                });
                
                console.log('从商品对象获取图片:', possibleImages);
                console.log('设置到publishForm.images:', publishForm.images);
                console.log('设置到fileList:', fileList.value);
                ElMessage.success(`已加载${possibleImages.length}张商品图片`);
                return;
            }
        }

        ElMessage.warning('未找到商品图片，请重新上传');
            } catch (error) {
        console.error('获取商品图片出错:', error);
        ElMessage.error('获取商品图片失败，请重新上传');
    }
}

// 处理下架商品
const handleOffShelfProduct = async (product) => {
    // 阻止事件冒泡，避免触发查看商品详情
    if (event) {
        event.stopPropagation();
    }
    
    try {
        // 确认是否下架
        await ElMessageBox.confirm(`确定要下架商品 "${product.title}" 吗？`, '下架商品', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        });
        
        // TODO: 调用下架商品的API
        // const response = await updateProductStatus(product.id, 'off_shelf');
        
        // 模拟API调用成功
        ElMessage.success('商品已下架');
        
        // 更新商品状态
        product.status = 'off_shelf';
        
        // 可选：重新加载商品列表
        // loadUserProducts();
    } catch (error) {
        if (error !== 'cancel') {
            console.error('下架商品失败:', error);
            ElMessage.error('下架商品失败');
        }
    }
}

// 处理重新上架商品
const handleRelistProduct = async (product) => {
    // 阻止事件冒泡，避免触发查看商品详情
    if (event) {
        event.stopPropagation();
    }
    
    try {
        // 确认是否重新上架
        await ElMessageBox.confirm(`确定要重新上架商品 "${product.title}" 吗？`, '重新上架', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info'
        });
        
        // TODO: 调用重新上架商品的API
        // const response = await updateProductStatus(product.id, 'selling');
        
        // 模拟API调用成功
        ElMessage.success('商品已重新上架');
        
        // 更新商品状态
        product.status = 'selling';
        
        // 可选：重新加载商品列表
        // loadUserProducts();
    } catch (error) {
        if (error !== 'cancel') {
            console.error('重新上架商品失败:', error);
            ElMessage.error('重新上架商品失败');
        }
    }
}

// 获取订单状态文本
const getStatusText = (status) => {
    const statusMap = {
        '1': '待交易',  // 合并原来的待发货和待收货
        '4': '待评价',  // 新增状态
        '2': '已完成',
        '3': '已取消'
    }
    return statusMap[status] || status
}

// 格式化日期
const formatDate = (date) => {
    if (!date) return ''
    
    if (typeof date === 'string') {
        date = new Date(date)
    }
    
    return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    })
}

// 在组件挂载时初始化数据
onMounted(async () => {
    // 检查用户是否已登录
    if (!userStore.isLoggedIn) {
        ElMessage.warning('请先登录')
        router.push('/login')
        return
    }
    
    // 根据路由查询参数加载数据
    await loadUserDataByQueryParams()
    
    // 确保加载并显示商品数据
    loadUserProducts()
    
    // 如果初始activeMenu是Act，加载求购列表
    if (activeMenu.value === 'buying') {
        loadUserRequests()
    }
})

// 是否为访客模式（查看他人的个人中心）
const isVisitorMode = computed(() => {
    const userId = route.query.userId as string
    return userId && userId !== userStore.userInfo.id
})

// 添加监听路由参数变化的逻辑
watch(() => route.query.userId, async (newUserId, oldUserId) => {
    console.log('userId变化:', oldUserId, '->', newUserId)
    if (newUserId !== oldUserId) {
        // 当userId参数变化时重新加载数据
        await loadUserDataByQueryParams()
        // 重新加载商品数据
        loadUserProducts()
        
        // 如果是访客模式，确保当前页面是产品页、求购页或个人资料页
        if (newUserId && newUserId !== userStore.userInfo.id) {
            // 如果当前菜单不是允许访问的页面，切换到products
            if (activeMenu.value !== 'products' && activeMenu.value !== 'buying' && activeMenu.value !== 'profile') {
                activeMenu.value = 'products'
            }
        }
    }
}, { immediate: true })

// 根据URL参数加载用户数据的方法
const loadUserDataByQueryParams = async () => {
    const userId = route.query.userId as string
    
    if (userId && userId !== userStore.userInfo.id) {
        console.log('正在加载用户ID:', userId, '的数据 (访客模式)')
        try {
            // 调用API获取该用户的基本信息
            // 假设我们有一个getUserInfoById的API
            // const userInfoResponse = await getUserInfoById(userId)
            // if (userInfoResponse.code === 200) {
            //    viewUserInfo.value = userInfoResponse.data
            // }
            
            // 由于没有实际API，这里模拟设置
            viewUserInfo.value = {
                id: userId,
                nickname: '其他用户',
                avatar: 'default-avatar.png' // 使用默认头像文件名，将通过路径 /images/user/ 访问
            }
            
            // 加载该用户的商品数据
            await userStore.getUserProducts({ 
                page: 1, 
                pageSize: pagination.products.pageSize,
                userId: userId 
            })
        } catch (error) {
            console.error('加载用户数据失败:', error)
            ElMessage.error('加载用户数据失败')
        }
    } else {
        // 加载当前登录用户的数据
        console.log('加载当前登录用户的数据')
        viewUserInfo.value = {...userStore.userInfo} // 清空或设置为当前用户
        if (userStore.products.length === 0) {
            await userStore.getUserProducts({ page: 1, pageSize: pagination.products.pageSize })
        }
    }
}

// 计算发布天数
const getDaysSince = (dateString) => {
    if (!dateString) return 0;
    const date = new Date(dateString);
    const now = new Date();
    const diffTime = Math.abs(now - date);
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    return diffDays;
};

// 全局商品数据 - 指定类型
const products = ref<Product[]>([]);

// 数据加载函数，确保立即执行加载模拟数据
const loadUserProducts = async () => {
    try {
        console.log('开始加载用户商品数据');
        console.log('从store获取的原始商品数据:', userStore.products);
        
        // 判断商品数组是否有内容
        if (userStore.products && userStore.products.length > 0) {
            // 不再直接调用API获取数据，由loadDataByMenu来控制API调用
            // 删除原来的模拟数据，直接使用store中的数据
            products.value = userStore.products.map((product: any): Product => { // 为 product 添加 any 类型，并指定返回类型为 Product
                // 将后端返回的中文状态转换为前端使用的英文状态
                let status: Product['status'] = product.status as Product['status']; // 显式类型转换
                if (typeof status === 'string') {
                    if (status === '在售') status = 'selling';
                    else if (status === '已售出') status = 'sold';
                    else if (status === '已下架') status = 'off_shelf';
                    else if (status === '草稿') status = 'draft';
                    // 移除待审核状态转换
                    // else if (status === '待审核') status = 'pending';
                }
                // 保持属性兼容性
                return {
                    id: product.id,
                    title: product.title || product.name || '',
                    price: product.price || 0,
                    originalPrice: product.originalPrice,
                    description: product.description || '',
                    status: status || 'draft', // 提供默认值
                    createdAt: product.createdAt || product.createTime || new Date().toISOString(),
                    updatedAt: product.updatedAt,
                    viewCount: product.viewCount || product.views || 0,
                    commentCount: product.commentCount || 0,
                    mainImageUrl: product.mainImageUrl || [],
                    isDiscounted: product.isDiscounted,
                    buyer: product.buyer,
                    location: product.location || '',
                    locationDescription: product.locationDescription || ''
                };
            });
            console.log('转换后的商品数据:', products.value);
            
        } else {
            console.warn('Store中没有商品数据，使用模拟数据');
            loadMockData(); // 直接加载完整的模拟数据
        }
    } catch (error) {
        console.error('获取商品失败', error);
        // 确保即使出错也使用模拟数据
        loadMockData();
    }
};

// 分离出加载模拟数据的函数，以便在出错时调用
const loadMockData = () => {
    products.value = [
        // 生成足够多的初始数据
        // ... (之前添加的更多模拟数据) ...
            {
            id: 1, title: 'MacBook Pro 2021', price: 9800, originalPrice: 12000,
            description: 'M1芯片，16GB内存，512GB固态硬盘，九成新，无划痕', status: 'selling',
            createdAt: new Date(Date.now() - 5 * 86400000).toISOString(), viewCount: 156,
            commentCount: 8, images: ['https://img.alicdn.com/imgextra/i1/2249662466/O1CN01SWVJfn1LtCyPSLF3t_!!2249662466.jpg'],
            isDiscounted: true
            },
            {
            id: 2, title: 'iPhone 14 Pro', price: 6999, originalPrice: 7999,
            description: '全新未拆封，256GB存储', status: 'selling',
            createdAt: new Date(Date.now() - 8 * 86400000).toISOString(), viewCount: 203,
            commentCount: 12, images: ['https://img14.360buyimg.com/n0/jfs/t1/122161/35/36440/38778/643f8724F43bcfc58/e7b20184c090583a.jpg'],
            isDiscounted: true
        },
        {
            id: 9, title: 'Apple Watch Series 9', price: 3299, originalPrice: 3699,
            description: '全新未拆封，国行正品', status: 'selling',
            createdAt: new Date(Date.now() - 10 * 86400000).toISOString(), viewCount: 110,
            commentCount: 5, images: ['https://img14.360buyimg.com/n0/jfs/t1/114675/40/41344/12246/650bd937F68aac03e/d9cade829724222f.jpg'],
            isDiscounted: false
        },
        {
            id: 10, title: 'Galaxy S23 Ultra', price: 6999, originalPrice: 8999,
            description: '98新，配件齐全，无划痕', status: 'selling',
            createdAt: new Date(Date.now() - 12 * 86400000).toISOString(), viewCount: 180,
            commentCount: 15, images: ['https://img14.360buyimg.com/n0/jfs/t1/172311/19/37162/50809/64dc8698F99ed5ca7/c14a44080d5c4e15.jpg'],
            isDiscounted: true
        },
        // 已售出 (Sold)
            {
            id: 3, title: '华为MateBook 14', price: 5599, originalPrice: 6599,
            description: '九成新，无磕碰', status: 'sold',
            createdAt: new Date(Date.now() - 15 * 86400000).toISOString(),
            updatedAt: new Date(Date.now() - 2 * 86400000).toISOString(), viewCount: 88,
            commentCount: 4, images: ['https://img14.360buyimg.com/n0/jfs/t1/112566/13/42222/53675/65c8c2b1Fc313b759/cf7aca2f2d0edc15.jpg'],
            buyer: '张先生'
        },
        {
            id: 4, title: '索尼WH-1000XM4耳机', price: 2299, originalPrice: 2599,
            description: '全新未拆封，国行正品', status: 'sold',
                createdAt: new Date(Date.now() - 20 * 86400000).toISOString(),
            updatedAt: new Date(Date.now() - 5 * 86400000).toISOString(), viewCount: 65,
            commentCount: 2, images: ['https://img14.360buyimg.com/n0/jfs/t1/111867/15/35046/45854/64a54a90F50254915/c6f42e00e2e52afc.jpg'],
            buyer: '李女士'
            },
            {
            id: 11, title: 'Switch OLED版', price: 2099, originalPrice: 2399,
            description: '95新，功能完好，配件齐全', status: 'sold',
                createdAt: new Date(Date.now() - 30 * 86400000).toISOString(),
            updatedAt: new Date(Date.now() - 10 * 86400000).toISOString(), viewCount: 120,
            commentCount: 7, images: ['https://img14.360buyimg.com/n0/jfs/t1/169875/16/39551/48557/6495dbf4Fc1851fef/5af2cf6e310f4eac.jpg'],
            buyer: '王同学'
            },
        // 已下架 (Off Shelf)
            {
            id: 5, title: '小米手环8', price: 239, originalPrice: 299,
            description: '全新未拆封，商品完好', status: 'off_shelf',
            createdAt: new Date(Date.now() - 25 * 86400000).toISOString(),
            updatedAt: new Date(Date.now() - 10 * 86400000).toISOString(), viewCount: 45,
            commentCount: 0, images: ['https://img14.360buyimg.com/n0/jfs/t1/218756/26/32642/35653/6475c97cF81a9e95c/10a2c32424abbda9.jpg']
            },
            {
            id: 6, title: '微软Xbox手柄', price: 499, originalPrice: 599,
            description: '95成新，功能正常', status: 'off_shelf',
            createdAt: new Date(Date.now() - 30 * 86400000).toISOString(),
            updatedAt: new Date(Date.now() - 15 * 86400000).toISOString(), viewCount: 38,
            commentCount: 1, images: ['https://img14.360buyimg.com/n0/jfs/t1/19787/9/20662/68385/65f0c76dFb4be909d/0c5b76e6e26bb9ed.jpg']
            },
            {
            id: 12, title: 'Kindle Paperwhite', price: 899, originalPrice: 1099,
            description: '9成新，功能正常', status: 'off_shelf',
            createdAt: new Date(Date.now() - 40 * 86400000).toISOString(),
            updatedAt: new Date(Date.now() - 20 * 86400000).toISOString(), viewCount: 70,
            commentCount: 3, images: ['https://img14.360buyimg.com/n0/jfs/t1/60142/11/36233/19483/65e71d91F8dc173cf/b3be7347df4adad7.jpg']
            },
        // 草稿箱 (Draft)
            {
            id: 7, title: 'AirPods Pro 2', price: 1699, originalPrice: 1999,
            description: '草稿内容，待完善', status: 'draft',
            createdAt: new Date(Date.now() - 2 * 86400000).toISOString(), viewCount: 0,
            commentCount: 0, images: ['https://img14.360buyimg.com/n0/jfs/t1/36012/35/19997/24990/63f47bb0F9e12a515/11e73594f0775314.jpg']
        },
        {
            id: 8, title: 'iPad Air 5', price: 4299, originalPrice: 4799,
            description: '草稿内容，待编辑', status: 'draft',
            createdAt: new Date(Date.now() - 1 * 86400000).toISOString(), viewCount: 0,
            commentCount: 0, images: ['https://img14.360buyimg.com/n0/jfs/t1/95465/33/39348/26316/65e84eb9F180f7cd5/3e2281ab0e9a69ad.jpg']
            },
            {
            id: 13, title: 'OPPO Find X6 Pro', price: 4299, originalPrice: 5999,
            description: '草稿，准备发布', status: 'draft',
            createdAt: new Date(Date.now() - 3 * 86400000).toISOString(), viewCount: 0,
            commentCount: 0, images: ['https://img14.360buyimg.com/n0/jfs/t1/196194/24/38416/76305/654c9c23Fe1efcd0f/b2d74db139c5b29b.jpg']
        }
    ];
};



// 筛选相关
const priceRange = ref([0, 10000])
const filterUrgent = ref(false)
const filterWithTags = ref(false)
const selectedTags = ref<string[]>([])
const contactFilter = ref('all')
const isFiltering = ref(false)

// 计算所有可用的标签
const allTags = computed(() => {
    const tags = new Set<string>()
    buyingRequests.value.forEach(item => {
        if (item.tags && Array.isArray(item.tags)) {
            item.tags.forEach(tag => tags.add(tag))
        }
    })
    return Array.from(tags)
})

// 根据标签筛选求购请求
const filteredBuyingRequests = computed(() => {
    let filtered = buyingRequests.value

    // 如果不是在所有标签中，则按状态筛选
    if (buyingActiveTab.value !== 'all') {
        filtered = filtered.filter(req => req.status === buyingActiveTab.value)
    }
    
    // 如果正在使用其他筛选条件
    if (isFiltering.value) {
        // 价格范围筛选
        filtered = filtered.filter(req => 
            req.price >= priceRange.value[0] && req.price <= priceRange.value[1]
        )
        
        // 只看急需
        if (filterUrgent.value) {
            filtered = filtered.filter(req => req.urgent)
        }
        
        // 有标签的商品
        if (filterWithTags.value) {
            filtered = filtered.filter(req => req.tags && req.tags.length > 0)
        }
        
        // 按标签筛选
        if (selectedTags.value.length > 0) {
            filtered = filtered.filter(req => {
                if (!req.tags || !Array.isArray(req.tags)) return false
                return selectedTags.value.some(tag => req.tags.includes(tag))
            })
        }
        
        // 按联系方式筛选
        if (contactFilter.value !== 'all') {
            filtered = filtered.filter(req => req.contactPreference === contactFilter.value)
        }
    }
    
    return filtered
})

// 处理价格变化
const handlePriceChange = (val) => {
    priceRange.value = val
}

// 切换标签筛选
const toggleTagFilter = (tag: string) => {
    const index = selectedTags.value.indexOf(tag)
    if (index === -1) {
        selectedTags.value.push(tag)
    } else {
        selectedTags.value.splice(index, 1)
    }
}

// 应用筛选
const applyFilters = () => {
    isFiltering.value = true
}

// 重置筛选
const resetFilters = () => {
    priceRange.value = [0, 10000]
    filterUrgent.value = false
    filterWithTags.value = false
    selectedTags.value = []
    contactFilter.value = 'all'
    isFiltering.value = false
}

// 获取求购状态对应的类型
const getBuyingStatusType = (status) => {
    const statusMap = {
        '1': 'success',  // 进行中
        '0': 'info',     // 已完成
        '2': 'warning'   // 草稿箱
    }
    return statusMap[status] || 'info'
}

// 获取求购状态对应的文本
const getBuyingStatusText = (status) => {
    const statusMap = {
        '1': '进行中',
        '0': '已完成',
        '2': '草稿箱'
    }
    return statusMap[status] || status
}

// 发布求购
const handleAddBuying = () => {
    // 实际项目中应该跳转到发布求购页面或打开弹窗
    ElMessage.info('发布求购功能正在开发中')
    // 也可以使用路由跳转
    // router.push('/buying/add')
}

// 关闭求购请求
const closeBuyingRequest = (id) => {
    ElMessage.success(`已关闭求购请求 #${id}`)
    // 实际项目中应该调用API来关闭求购
    // 更新本地数据以反映变化
    const index = buyingRequests.value.findIndex(item => item.id === id)
    if (index !== -1) {
        buyingRequests.value[index].status = 'closed'
    }
}

// 编辑求购请求
const editBuyingRequest = (id) => {
    ElMessage.info(`编辑求购请求 #${id}`)
    // 实际项目中应该跳转到编辑页面或打开编辑弹窗
}

// 查看匹配的商品
const viewMatches = (id) => {
    ElMessage.info(`查看求购请求 #${id} 的匹配商品`)
    // 实际项目中应该跳转到匹配商品列表页面或打开匹配商品弹窗
}

// 查看求购详情
const viewBuyingDetail = (id) => {
    ElMessage.info(`查看求购请求 #${id} 的详情`)
    // 实际项目中应该跳转到求购详情页面
}



const loadMoreBuyingRequests = () => {
    if (pagination.buying.hasMore && !buyingLoading.value) {
        pagination.buying.currentPage++
        fetchBuyingRequests({ page: pagination.buying.currentPage, pageSize: pagination.buying.pageSize })
    }
}

// 切换求购信息的收藏状态
const toggleRequestFavorite = async (item) => {
    try {
        // 请求ID不存在时不进行操作
        if (!item.id) {
            ElMessage.error('求购信息不完整，无法收藏');
            return;
        }

        // 检查用户是否已登录
        const userInfo = localStorage.getItem('userInfo');
        const token = localStorage.getItem('token');
        if (!userInfo || !token) {
            ElMessage.warning('请先登录后再收藏求购信息');
            router.push('/login?redirect=' + encodeURIComponent(router.currentRoute.value.fullPath));
            return;
        }

        // 获取当前用户ID
        const parsedUserInfo = JSON.parse(userInfo);
        const userId = parsedUserInfo.id;
        
        if (!userId) {
            ElMessage.warning('请先登录后再收藏求购信息');
            return;
        }

        // 判断当前是否已收藏
        const isFavorited = item.isFavorite;
        
        // 根据当前状态决定是收藏还是取消收藏
        let response;
        if (isFavorited) {
            // 取消收藏
            response = await request.delete(`/requests/${item.id}/favorite?userId=${userId}`, {
                headers: {
                    'Authorization': `Bearer ${token}`
                }
            });
        } else {
            // 添加收藏
            response = await request.post(`/requests/${item.id}/favorite`, { userId }, {
                headers: {
                    'Authorization': `Bearer ${token}`
                }
            });
        }

        // 检查响应是否成功
        if (response && (response.code === 200 || response.status === 200)) {
            // 更新收藏状态
            item.isFavorite = !isFavorited;
            
            // 显示成功消息
            ElMessage.success(isFavorited ? '已取消收藏' : '收藏成功');
        } else {
            ElMessage.error(response?.message || (isFavorited ? '取消收藏失败' : '收藏失败'));
        }
    } catch (error) {
        console.error('收藏操作失败:', error);
        ElMessage.error('操作失败，请稍后重试');
    }
}

// 处理处理Tab切换
const handleTabChange = (tab: Product['status'] | 'all') => {
    // 在访客模式下，只允许切换到'all'或'selling'标签
    if (isVisitorMode.value && tab !== 'all' && tab !== 'selling') {
        ElMessage.warning('访客模式下无法查看该内容')
        return
    }
    
    activeTab.value = tab;
    // 不再需要加载更多数据的逻辑
};

// 计算需要显示的商品列表
const displayedProducts = computed(() => {
  if (activeTab.value === 'all') {
    return products.value;
  }
  return products.value.filter(product => product.status === activeTab.value);
});

// 发布商品相关状态
const showPublishModal = ref(false)
// publishLoading 现在可以是 boolean 或 string ('selling'/'draft')
const publishLoading = ref<boolean | 'selling' | 'draft'>(false)
const publishFormRef = ref<FormInstance>()
// 当前编辑的商品ID，null表示新建商品
const editingProductId = ref<number | null>(null)
const dialogVisible = ref(false)
const dialogImageUrl = ref('')
const fileList = ref<UploadFile[]>([])

// 地址解析相关 - 发布商品表单
const addressLoading = ref(false)
const locationInputTimer = ref<number | null>(null)
const locationInputComplete = ref(false)

// 地址解析相关 - 求购表单
const requestAddressLoading = ref(false)
const requestLocationInputTimer = ref<number | null>(null)
const requestLocationInputComplete = ref(false)

// 发布商品表单数据 - 使用与学校详情页一致的字段名
const publishForm = reactive({
    name: '',          // 使用name代替title
    description: '',
    price: 0,
    originalPrice: 0,
    images: [] as string[],
    condition: '',     // 成色
    categoryId: 1,     // 使用categoryId代替category，默认为1
    schoolId: 51,      // 学校ID，默认为51
    location: '',      // 位置
    coordinates: null as number[] | null, // 地理坐标 [经度, 纬度]
})

// 表单验证规则 - 定义中文错误提示，更新字段名与学校详情页一致
const publishRules = {
    name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
    description: [{ required: true, message: '请填写商品描述', trigger: 'blur' }],
    price: [{ required: true, type: 'number', min: 0, message: '请设置有效价格', trigger: 'blur' }],
    condition: [{ required: true, message: '请选择商品成色', trigger: 'change' }],
    categoryId: [{ required: true, message: '请选择商品分类', trigger: 'change' }],
    location: [{ required: true, message: '请填写交易地点', trigger: 'blur' }],
    // 移除对images数组的验证，我们会在提交时手动验证
}

// 重置发布表单
const resetPublishForm = () => {
    publishForm.name = ''          // 重置name
    publishForm.description = ''
    publishForm.price = 0
    publishForm.originalPrice = 0
    publishForm.images = []
    publishForm.condition = ''     // 重置成色
    publishForm.categoryId = 1     // 重置分类ID
    publishForm.schoolId = 51      // 重置学校ID
    publishForm.location = ''      // 重置位置
    publishForm.coordinates = null // 重置坐标
    
    // 确保文件列表也被重置
    fileList.value = []
    
    // 确保预览图片也被重置
    dialogImageUrl.value = ''
    dialogVisible.value = false
}

// 处理关闭模态框
const handleCloseModal = () => {
    showPublishModal.value = false
    resetPublishForm()
    // 重置编辑状态
    editingProductId.value = null
}

// 图片预览处理
const handlePicturePreview = (file) => {
    dialogImageUrl.value = file.url
    dialogVisible.value = true
}

// 图片移除处理
const handlePictureRemove = (file) => {
    const index = publishForm.images.indexOf(file.url)
    if (index > -1) {
        publishForm.images.splice(index, 1)
    }
}

// 图片选择验证并添加到列表（不上传）
const handleImageSelect = (file) => {
    const isJPGOrPNG = file.type === 'image/jpeg' || file.type === 'image/png'
    const isLt2M = file.size / 1024 / 1024 < 2

    console.log('Image Select Check:', { isJPGOrPNG, isLt2M, fileType: file.type, fileSize: file.size });

    if (!isJPGOrPNG) {
        ElMessage.error('上传图片只能是 JPG/PNG 格式!')
        console.error('Upload Error: Invalid file type', file.type);
        return false
    }
    if (!isLt2M) {
        ElMessage.error('上传图片大小不能超过 2MB!')
        console.error('Upload Error: File size exceeds limit', file.size);
        return false
    }
    
    // 创建一个用于预览的URL
    file.url = URL.createObjectURL(file)
    
    // 确保文件对象引用正确
    file.raw = file;
    
    // 添加到图片数组中，以确保表单验证通过
    publishForm.images.push(file.url);
    
    console.log('图片已选择:', file.name);
    console.log('当前图片数组长度:', publishForm.images.length);
    
    return true
}

// 图片上传成功处理
const handleImgSuccess = (response, uploadFile, uploadFiles) => {
    console.log('Image Upload Success Response:', response);
    console.log('Upload File Object:', uploadFile);
    console.log('Current Upload Files:', uploadFiles);
    // 假设接口成功返回 code 200 和包含 URL 的 data 字段
    if (response && response.code === 200 && response.data) {
        publishForm.images.push(response.data) // 将图片 URL 添加到表单数据
        console.log('Updated publishForm.images:', publishForm.images);
        ElMessage.success('图片上传成功')
    } else {
        console.error('Upload Error: Invalid server response or missing data', response);
        ElMessage.error(response?.message || '图片上传失败，服务器响应异常')
        // 可选: 如果上传失败，从 el-upload 的列表中移除该文件 (如果需要手动管理)
        // const index = uploadFiles.findIndex(f => f.uid === uploadFile.uid);
        // if (index > -1) {
        //     uploadFiles.splice(index, 1);
        // }
    }
}

// 处理文件列表变化
const handleUploadChange = (uploadFile, uploadFiles) => {
    console.log('文件列表变化:', uploadFile, uploadFiles);
    // 确保fileList更新
    fileList.value = uploadFiles;
    
    // 如果文件对象缺少raw属性，添加它
    if (uploadFile && !uploadFile.raw && uploadFile.originFileObj) {
        uploadFile.raw = uploadFile.originFileObj;
    } else if (uploadFile && !uploadFile.raw && uploadFile instanceof File) {
        uploadFile.raw = uploadFile;
    }
    
    console.log('更新后的fileList长度:', fileList.value.length);
}

// 处理提交发布 或 存为草稿
const handlePublishSubmit = async (status: 'selling' | 'draft') => {
    if (!publishFormRef.value) return
    
    // 使用已定义的表单验证规则
    publishFormRef.value.validate(async (isValid) => {
        if (isValid) {
            try {
                publishLoading.value = status // 标记正在提交的状态
                
                // 使用FormData来处理文件上传
                const formData = new FormData();
                
                // 如果是编辑现有商品，添加商品ID
                if (editingProductId.value) {
                    formData.append('id', editingProductId.value.toString());
                    console.log(`正在编辑商品ID: ${editingProductId.value}`);
                }
                
                // 添加基本商品信息 - 使用与学校详情页一致的参数命名
                formData.append('name', publishForm.name); // 使用name代替title
                formData.append('description', publishForm.description);
                formData.append('price', publishForm.price.toString());
                formData.append('originalPrice', publishForm.originalPrice.toString());
                formData.append('condition', publishForm.condition);
                formData.append('categoryId', String(publishForm.categoryId)); // 使用categoryId代替category
                formData.append('schoolId', String(publishForm.schoolId)); // 添加学校ID
                
                // 添加位置信息
                formData.append('location', publishForm.location);
                formData.append('locationDescription', publishForm.location);  // 使用相同的值作为位置描述
                formData.append('status', status);
                
                // 添加坐标信息
                if (publishForm.coordinates && Array.isArray(publishForm.coordinates)) {
                    formData.append('longitude', publishForm.coordinates[0].toString());
                    formData.append('latitude', publishForm.coordinates[1].toString());
                }
                
                // 添加userId参数
                const userId = userStore.userInfo.id;
                if (userId) {
                    formData.append('userId', userId);
                }
                
                // 集中处理所有图片文件 - 无论是新上传还是已有图片
                const newUploadFiles: File[] = [];
                const existingImageUrls: string[] = [];
                
                // 处理所有图片文件
                fileList.value.forEach((file: UploadFile) => {
                    if (file.raw && file.raw instanceof File) {
                        // 新上传的文件，添加到新文件数组
                        console.log('处理新上传文件:', file.raw.name);
                        newUploadFiles.push(file.raw);
                    } else if (file.url) {
                        // 已有的图片URL，可能需要保持不变
                        let imageUrl = file.url;
                        
                        // 如果URL是完整路径，提取文件名部分
                        if (imageUrl.startsWith('/images/product/')) {
                            imageUrl = imageUrl.substring('/images/product/'.length);
                        } else if (imageUrl.startsWith('http')) {
                            // 对于完整URL，保留原样
                        }
                        
                        // 如果文件有originalUrl属性，优先使用
                        if (file.originalUrl) {
                            imageUrl = file.originalUrl;
                        }
                        
                        console.log('处理已有图片URL:', imageUrl);
                        existingImageUrls.push(imageUrl);
                    }
                });
                
                // 检查是否有任何图片
                console.log('图片检查:', {
                    fileListLength: fileList.value.length,
                    newUploadFiles: newUploadFiles.length,
                    existingImageUrls: existingImageUrls.length
                });
                
                // 如果fileList中有图片，但newUploadFiles和existingImageUrls都为空，则从fileList收集图片
                if (fileList.value.length > 0 && newUploadFiles.length === 0 && existingImageUrls.length === 0) {
                    fileList.value.forEach(file => {
                        if (file.url) {
                            let imageUrl = file.url;
                            // 处理URL路径
                            if (imageUrl.startsWith('/images/product/')) {
                                imageUrl = imageUrl.substring('/images/product/'.length);
                            }
                            existingImageUrls.push(imageUrl);
                        } else if (file.raw instanceof File) {
                            newUploadFiles.push(file.raw);
                        }
                    });
                }
                
                if (newUploadFiles.length === 0 && existingImageUrls.length === 0) {
                    // 最后检查一下fileList
                    if (fileList.value.length === 0) {
                        ElMessage.warning('请至少上传一张商品图片');
                        publishLoading.value = false;
        return;
    }
    
                    // 从fileList中重新尝试提取图片
                    for (const file of fileList.value) {
                        if (file.raw instanceof File) {
                            newUploadFiles.push(file.raw);
                        } else if (file.url) {
                            let imageUrl = file.url;
                            if (imageUrl.startsWith('/images/product/')) {
                                imageUrl = imageUrl.substring('/images/product/'.length);
                            }
                            existingImageUrls.push(imageUrl);
                        } else if (file.originFileObj instanceof File) {
                            // ElementUI可能使用originFileObj存储文件
                            newUploadFiles.push(file.originFileObj);
                        }
                    }
                    
                    // 最终检查
                    if (newUploadFiles.length === 0 && existingImageUrls.length === 0) {
                        ElMessage.warning('无法获取图片数据，请重新上传图片');
                        publishLoading.value = false;
                        return;
                    }
                }
                
                // 添加所有新上传的文件，统一使用'files'参数名
                if (newUploadFiles.length > 0) {
                    console.log(`添加${newUploadFiles.length}张新上传图片:`, newUploadFiles.map(f => f.name));
                    
                    // 使用多种可能的参数名，确保后端能接收到
                    newUploadFiles.forEach(file => {
                        // 检查文件对象是否有效
                        if (file instanceof File) {
                            formData.append('files', file);
                            
                            // 部分后端可能使用图片参数名称，添加多个参数名以兼容
                            formData.append('images[]', file);
                            formData.append('file', file);  // 单文件模式兼容
            } else {
                            console.error('无效的文件对象:', file);
                        }
                    });
                    
                    // 第一张图设置为主图
                    if (newUploadFiles.length > 0) {
                        formData.append('mainImage', newUploadFiles[0]);
                    }
                }
                
                // 添加已有的图片URL - 确保使用正确的参数名
                if (existingImageUrls.length > 0) {
                    console.log(`添加${existingImageUrls.length}张已有图片:`, existingImageUrls);
                    
                    existingImageUrls.forEach(url => {
                        formData.append('imageUrls', url);
                    });
                }
                
                // 定义编辑状态变量
                const isEdit = editingProductId.value !== null;
                
                console.log(`正在${isEdit ? '更新' : status === 'selling' ? '发布' : '保存草稿'}商品，共${newUploadFiles.length}张新图片，${existingImageUrls.length}张已有图片`);
                
                // 检查是否有任何图片
                if (newUploadFiles.length === 0 && existingImageUrls.length === 0) {
                    ElMessage.warning('请至少上传一张商品图片');
                    publishLoading.value = false;
        return;
    }
    
                // 如果是编辑模式，确保现有图片能被正确处理
                if (existingImageUrls.length > 0) {
                    console.log('确保已有图片能被后端正确识别:', existingImageUrls);
                    
                    // 检查是否有主图
                    if (existingImageUrls.length > 0) {
                        // 第一张图设为主图
                        formData.append('mainImageUrl', existingImageUrls[0]);
                    }
                    
                    // 确保所有图片URL都被添加
                    formData.append('imagesList', JSON.stringify(existingImageUrls));
                    
                    // 兼容其他可能的参数名
                    formData.append('images', JSON.stringify(existingImageUrls));
                }
                
                // 实际调用API发送请求 - 区分新建和编辑
                const API_BASE_URL = 'http://localhost:8080/api';
                const url = isEdit ? `${API_BASE_URL}/products/${editingProductId.value}` : `${API_BASE_URL}/products`;
                const method = isEdit ? 'PUT' : 'POST';
                
                console.log('准备发送请求:', {
                    url,
                    method,
                    formDataEntries: [...formData.entries()].map(([key, value]) => {
                        if (value instanceof File) {
                            return [key, `文件:${value.name}(${value.size}字节)`];
                        }
                        return [key, value];
                    })
                });
                
                try {
                    const response = await fetch(url, {
                        method: method,
                        body: formData,
                headers: {
                            'Authorization': `Bearer ${localStorage.getItem('token') || ''}`
                        }
                    });
                    
                    // 检查响应状态
                    if (!response.ok) {
                        const errorData = await response.json().catch(() => ({}));
                        throw new Error(errorData.message || `请求失败 (${response.status})`);
                    }
                    
                    // 解析响应数据
                    const responseData = await response.json();
                    console.log('请求响应:', responseData);
                    
                    // 检查API响应状态码
                    if (responseData.code !== 200) {
                        throw new Error(responseData.message || '操作失败，请稍后重试');
                    }
                } catch (networkError) {
                    console.error('网络请求错误:', networkError);
                    throw new Error('网络请求失败，请检查网络连接并重试');
                }
                
                // 根据不同操作显示不同成功消息
                if (isEdit) {
                    ElMessage.success('商品更新成功');
                } else {
                    ElMessage.success(status === 'selling' ? '商品发布成功' : '草稿保存成功');
                }
                
                // 关闭模态框
                showPublishModal.value = false;
                
                // 重置表单、图片列表和编辑状态
                resetPublishForm();
                fileList.value = [];
                editingProductId.value = null;
                
                // 刷新商品列表
                await userStore.getUserProducts({ page: 1, pageSize: pagination.products.pageSize });
                loadUserProducts();
            } catch (error) {
                console.error(`${status === 'selling' ? '发布' : '保存草稿'}失败`, error);
                ElMessage.error(`${status === 'selling' ? '发布商品' : '保存草稿'}失败，请稍后重试`);
            } finally {
                publishLoading.value = false; // 无论成功失败，结束loading
            }
        } else {
            ElMessage.warning('请完善表单信息');
        }
    })
}


// 处理头像变更
const handleAvatarChange = (e: Event) => {
    const target = e.target as HTMLInputElement;
    const file = target.files?.[0];
    if (file) {
        const isJPGOrPNG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        
        if (!isJPGOrPNG) {
            ElMessage.error('上传头像图片只能是 JPG/PNG 格式!');
            return;
        }
        if (!isLt2M) {
            ElMessage.error('上传头像图片大小不能超过 2MB!');
            return;
        }
        
        // 保存原始文件对象供表单提交时使用
        profileForm.avatarFile = file;
        
        // 创建一个FileReader来读取文件，用于预览显示
        const reader = new FileReader();
        reader.onload = (event: ProgressEvent<FileReader>) => {
            if (event.target?.result) {
                profileForm.avatar = event.target.result as string;
                ElMessage.success('头像上传成功');
            }
        };
        reader.readAsDataURL(file);
    }
};

// 处理头像点击事件
const handleAvatarClick = () => {
    const avatarInput = document.querySelector('input[type="file"]') as HTMLInputElement;
    if (avatarInput) {
        avatarInput.click();
    }
};

// 地址解析功能
const parseAddress = async () => {
    if (!publishForm.location) {
        locationInputComplete.value = false;
        publishForm.coordinates = null;
        return;
    }
    
    addressLoading.value = true;
    locationInputComplete.value = true;
    try {
        if (!window.AMap) {
            ElMessage.error('高德地图API未加载，请刷新页面重试');
            return;
        }
        
        // 城市提示，提高地址解析准确性
        const cityHint = userStore?.userInfo?.school?.city || '';
        
        // 构造完整地址
        let fullAddress = publishForm.location;
        if (!fullAddress.includes(userStore?.userInfo?.school?.name || '') && userStore?.userInfo?.school?.name) {
            fullAddress = `${userStore.userInfo.school.name} ${fullAddress}`;
        }
        
        console.log('开始地址解析:', fullAddress, '使用城市提示:', cityHint);
        
        // 使用高德地图API解析地址
        AMap.plugin(['AMap.Geocoder'], () => {
            const geocoder = new AMap.Geocoder({
                city: cityHint || '全国',
                radius: 1000
            });
            
            geocoder.getLocation(fullAddress, (status, result) => {
                addressLoading.value = false;
                
                if (status === 'complete' && result.info === 'OK') {
                    if (result.geocodes && result.geocodes.length > 0) {
                        const location = result.geocodes[0].location;
                        publishForm.coordinates = [location.lng, location.lat];
                        ElMessage.success('地址解析成功');
                    } else {
                        ElMessage.warning('找不到该地址，请检查后重试');
                    }
                } else {
                    ElMessage.warning('地址解析失败，请尝试更详细的地址');
                }
            });
        });
    } catch (error) {
        addressLoading.value = false;
        console.error('地址解析出错:', error);
        ElMessage.error('地址解析出错，请稍后重试');
    }
};

// 监听地址输入变化，自动解析
watch(() => publishForm.location, (newValue) => {
    // 取消之前的定时器
    if (locationInputTimer.value !== null) {
        clearTimeout(locationInputTimer.value);
    }
    
    // 如果输入为空，清除坐标
    if (!newValue || newValue.trim() === '') {
        publishForm.coordinates = null;
        locationInputComplete.value = false;
        return;
    }
    
    locationInputComplete.value = false;
    
    // 设置新的定时器，延迟1.5秒后触发解析
    locationInputTimer.value = setTimeout(() => {
        parseAddress();
    }, 1500) as unknown as number;
});

// 新增viewUserInfo对象存储正在查看的用户信息
const viewUserInfo = ref({
    id: '',
    nickname: '',
    avatar: '',
    // 其他需要显示的用户信息
})

// 添加收藏的求购信息列表状态
const favoritePurchaseRequests = ref([]);
const favoritePurchaseRequestsTotal = ref(0);
const favoritePurchaseRequestsLoading = ref(false);

// 获取用户收藏的求购信息列表
const fetchFavoritePurchaseRequests = async () => {
    if (!userStore.isLoggedIn) {
        ElMessage.warning('请先登录');
        return false;
    }
    
    favoritePurchaseRequestsLoading.value = true;
    try {
        console.log('加载收藏的求购信息');
        
        const response = await getUserFavoriteRequests();
        
        if (response.code === 200) {
            favoritePurchaseRequests.value = response.data.content;
            favoritePurchaseRequestsTotal.value = response.data.totalElements;
            console.log('已加载收藏的求购信息数量:', favoritePurchaseRequests.value.length);
            return true;
        } else {
            console.error('获取收藏的求购信息失败:', response.message);
            ElMessage.error('获取收藏的求购信息失败');
            return false;
        }
    } catch (error) {
        console.error('获取收藏的求购信息失败:', error);
        ElMessage.error('获取收藏的求购信息失败');
        return false;
    } finally {
        favoritePurchaseRequestsLoading.value = false;
    }
};

// 收藏Tab选择
const favoritesActiveTab = ref('products');

// 处理收藏Tab切换
const handleFavoritesTabChange = async (tabName) => {
    console.log('切换收藏列表Tab:', tabName);
    
    if (tabName === 'requests' && favoritePurchaseRequests.value.length === 0 && !favoritePurchaseRequestsLoading.value) {
        // 加载收藏的求购信息
        await fetchFavoritePurchaseRequests();
    }
};

// 分页参数添加
// pagination.favoriteRequests = { page: 1, pageSize: 10, hasMore: true }; // 注释掉或移除分页参数定义

// 切换求购信息收藏状态
const toggleFavoritePurchaseRequest = async (request) => {
    try {
        // 添加确认提示
        await ElMessageBox.confirm('确定要取消收藏该求购信息吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        });
        
        // 从API导入
        const { unfavoriteRequest } = await import('@/api/request');
        
        // 发送请求
        const response = await unfavoriteRequest(request.id);
        
        if (response.code === 200) {
            // 从列表中移除该条目
            favoritePurchaseRequests.value = favoritePurchaseRequests.value.filter(item => item.id !== request.id);
            ElMessage.success('已取消收藏');
        } else {
            ElMessage.error(response.message || '操作失败');
        }
    } catch (error) {
        if (error !== 'cancel') {
            console.error('取消收藏失败:', error);
            ElMessage.error('操作失败，请稍后重试');
        }
    }
};

// 新增：处理订单状态页签切换的函数
const handleOrderStatusTabChange = async (newStatusName: TabPaneName) => {
    // orderActiveTab 已经通过 v-model 更新
    pagination.orders.page = 1; // 切换状态时重置到第一页
    await fetchOrdersForCurrentRoleAndStatus();
};

const orderRoleTab = ref<'buyer' | 'seller'>('buyer'); // 新增：追踪订单角色，默认买家

// 新增：统一获取订单的辅助函数
const fetchOrdersForCurrentRoleAndStatus = async () => {
    const role = orderRoleTab.value;
    const statusString = orderActiveTab.value === 'all' ? undefined : orderActiveTab.value;
    const status = statusString === undefined ? undefined : parseInt(statusString, 10);

    console.log(`Fetching orders for role: ${role}, status: ${status ?? 'all'}, page: ${pagination.orders.page}`);
    
    try {
        orderStore.loading = true;
        
        // 根据不同角色调用不同的API
        if (role === 'buyer') {
            // 调用买家订单API
            await orderStore.fetchBuyerOrders({
        page: pagination.orders.page,
        size: pagination.orders.pageSize,
                status: status
            });
        } else if (role === 'seller') {
            // 调用卖家订单API
            await orderStore.fetchSellerOrders({
                page: pagination.orders.page,
                size: pagination.orders.pageSize,
                status: status
            });
        }
        
        pagination.orders.hasMore = orderStore.orders.length < orderStore.total;
    } catch (error) {
        console.error('获取订单失败:', error);
        ElMessage.error('获取订单列表失败');
    } finally {
        orderStore.loading = false;
    }
};

// 新增：处理订单角色页签切换的函数
const handleOrderRoleTabChange = async (newRole: TabPaneName) => {
    // orderRoleTab 已经通过 v-model 更新
    // newRole 参数在这里可以用来验证，但 orderRoleTab.value 应该已经是新值了
    orderActiveTab.value = 'all'; // 切换角色时，状态重置为"全部"
    pagination.orders.page = 1;   // 重置到第一页
    await fetchOrdersForCurrentRoleAndStatus();
};

// 添加获取求购请求的函数
const fetchBuyingRequests = async (params: { page?: number, pageSize?: number, status?: string } = {}) => {
    if (!userStore.isLoggedIn) {
        ElMessage.warning('请先登录');
        return false;
    }
    
    buyingLoading.value = true;
    try {
        // 这里应该调用真实的API，当前使用模拟数据
        // const response = await getUserBuyingRequests(params);
        
        // 模拟API响应
        await new Promise(resolve => setTimeout(resolve, 500));
        const mockResponse = {
            code: 200,
            data: {
                content: Array(5).fill(null).map((_, index) => ({
                    id: index + 1,
                    title: `求购商品 ${index + 1}`,
                    description: `这是一个求购商品的描述 ${index + 1}`,
                    price: Math.floor(Math.random() * 5000) + 500,
                    status: ['1', '0', '2'][Math.floor(Math.random() * 3)],
                    createdAt: new Date(Date.now() - Math.random() * 86400000 * 30).toISOString(),
                    urgent: Math.random() > 0.7,
                    tags: ['电子产品', '书籍', '衣物', '生活用品'].filter(() => Math.random() > 0.5),
                    contactPreference: ['微信', '电话', '当面'][Math.floor(Math.random() * 3)]
                })),
                totalElements: 15,
                size: params.pageSize || 10,
                number: params.page || 1,
                totalPages: 2
            }
        };
        
        const response = mockResponse;
        
        if (response.code === 200) {
            if (params.page === 1 || params.page === undefined) {
                buyingRequests.value = response.data.content;
            } else {
                buyingRequests.value = [...buyingRequests.value, ...response.data.content];
            }
            buyingTotal.value = response.data.totalElements;
            
            // 更新是否有更多数据
            pagination.buying.hasMore = buyingRequests.value.length < buyingTotal.value;
            
            return true;
        }
        return false;
    } catch (error) {
        console.error('获取求购列表失败:', error);
        ElMessage.error('获取求购列表失败');
        return false;
    } finally {
        buyingLoading.value = false;
    }
};

// 求购管理相关变量
const buyingActiveTab = ref('all')
const buyingRequests = ref<PurchaseRequestItem[]>([])
const buyingRequestsLoading = ref(false)
const totalRequests = ref(0)
const currentRequestPage = ref(1)
const requestPageSize = ref(10)
const showRequestDialog = ref(false)
const requestFormRef = ref<FormInstance | null>(null)
const editingRequest = ref<PurchaseRequestItem | null>(null)
const requestSubmitting = ref<boolean | string>(false)

// 求购表单对象
const requestForm = reactive({
    title: '',
    description: '',
    budget: 0,
    categoryId: '',
    location: '',
    contactInfo: '',
    expireTime: '',
    images: [] as string[] // 添加图片字段
})

// 求购表单图片列表
const requestFileList = ref([])

// 求购列表根据标签过滤
const displayedBuyingRequests = computed(() => {
    
    if (!buyingRequests.value || buyingRequests.value.length === 0) {
        console.log('当前无求购数据');
        return [];
    }
    
    // 添加详细日志来调试过滤
    const filtered = (() => {
        if (buyingActiveTab.value === 'all') {
            console.log('显示全部求购');
            return buyingRequests.value;
        } else if (buyingActiveTab.value === 'active') {
            console.log('显示进行中求购');
            return buyingRequests.value.filter(item => item.status === 1);
        } else if (buyingActiveTab.value === 'completed') {
            console.log('显示已完成求购');
            return buyingRequests.value.filter(item => item.status === 0);
        } else if (buyingActiveTab.value === 'draft') {
            console.log('显示草稿箱求购');
            return buyingRequests.value.filter(item => item.status === 2);
        }
        return buyingRequests.value;
    })();
    
    console.log('过滤后的求购列表:', filtered);
    return filtered;
})

// 加载用户求购列表
const loadUserRequests = async () => {
    if (isVisitorMode.value && !viewUserInfo.value?.id) return
    
    buyingRequestsLoading.value = true
    try {
        const userId = isVisitorMode.value ? viewUserInfo.value.id : userStore.userInfo.id
        
        // 直接使用自定义函数，避免导入冲突
        const result = await request.get('/requests', { 
            params: {
                userId,
                page: currentRequestPage.value,
                pageSize: requestPageSize.value
            }
        })
        
        console.log('求购列表API响应:', result);
        
        if (result.code === 200) {
            // 处理返回的数据
            buyingRequests.value = result.data.content || [];
            totalRequests.value = result.data.totalElements || 0;
            
            // 打印获取到的数据，以便调试
            console.log('获取到的求购列表:', buyingRequests.value);
        } else {
            ElMessage.error(result.message || '获取求购列表失败')
        }
    } catch (error) {
        console.error('加载用户求购列表出错:', error)
        ElMessage.error('获取求购列表失败')
    } finally {
        buyingRequestsLoading.value = false
    }
}

// 处理求购标签切换
const handleBuyingTabChange = (tab) => {
    buyingActiveTab.value = tab
}

// 处理求购分页切换
const handleRequestPageChange = (page) => {
    currentRequestPage.value = page
    loadUserRequests()
}

// 求购表单地址自动解析
const parseRequestLocation = async () => {
    if (!requestForm.location) {
        requestLocationInputComplete.value = false;
        requestForm.coordinates = null;
        return;
    }
    
    requestAddressLoading.value = true;
    requestLocationInputComplete.value = true;
    
    try {
        if (!window.AMap) {
            ElMessage.error('高德地图API未加载，请刷新页面重试');
            return;
        }
        
        // 城市提示，提高地址解析准确性
        const cityHint = userStore?.userInfo?.school?.city || '';
        
        // 构造完整地址
        let fullAddress = requestForm.location;
        if (!fullAddress.includes(userStore?.userInfo?.school?.name || '') && userStore?.userInfo?.school?.name) {
            fullAddress = `${userStore.userInfo.school.name} ${fullAddress}`;
        }
        
        // 使用高德地图API解析地址
        AMap.plugin(['AMap.Geocoder'], () => {
            const geocoder = new AMap.Geocoder({
                city: cityHint || '全国',
                radius: 1000
            });
            
            geocoder.getLocation(fullAddress, (status, result) => {
                requestAddressLoading.value = false;
                
                if (status === 'complete' && result.info === 'OK') {
                    if (result.geocodes && result.geocodes.length > 0) {
                        const location = result.geocodes[0].location;
                        requestForm.coordinates = [location.lng, location.lat];
                        ElMessage.success('地址解析成功');
                    } else {
                        ElMessage.warning('找不到该地址，请检查后重试');
                    }
                } else {
                    ElMessage.warning('地址解析失败，请尝试更详细的地址');
                }
            });
        });
    } catch (error) {
        requestAddressLoading.value = false;
        console.error('地址解析出错:', error);
        ElMessage.error('地址解析出错，请稍后重试');
    }
};

// 监听求购表单地址输入变化，自动解析
watch(() => requestForm.location, (newValue) => {
    // 取消之前的定时器
    if (requestLocationInputTimer.value !== null) {
        clearTimeout(requestLocationInputTimer.value);
    }
    
    // 如果输入为空，清除坐标
    if (!newValue || newValue.trim() === '') {
        requestForm.coordinates = null;
        requestLocationInputComplete.value = false;
        return;
    }
    
    requestLocationInputComplete.value = false;
    
    // 设置新的定时器，延迟1.5秒后触发解析
    requestLocationInputTimer.value = setTimeout(() => {
        parseRequestLocation();
    }, 1500) as unknown as number;
});

// 发布新求购
const handlePublishRequest = () => {
    editingRequest.value = null
    requestForm.title = ''
    requestForm.description = ''
    requestForm.budget = 0
    requestForm.categoryId = ''
    
    // 设置默认过期时间为30天后
    const future = new Date()
    future.setDate(future.getDate() + 30)
    const year = future.getFullYear()
    const month = String(future.getMonth() + 1).padStart(2, '0')
    const day = String(future.getDate()).padStart(2, '0')
    const hours = String(future.getHours()).padStart(2, '0')
    const minutes = String(future.getMinutes()).padStart(2, '0')
    const seconds = String(future.getSeconds()).padStart(2, '0')
    requestForm.expireTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    
    requestForm.contactInfo = ''
    requestForm.location = ''
    showRequestDialog.value = true
}

// 编辑求购
const handleEditRequest = (request) => {
    editingRequest.value = request
    requestForm.title = request.title
    requestForm.description = request.description
    requestForm.budget = request.budget
    requestForm.categoryId = request.categoryId
    
    // 处理过期时间格式
    if (request.expireTime) {
        // 如果expireTime已经是格式化的字符串，直接使用
        if (typeof request.expireTime === 'string' && request.expireTime.includes('-')) {
            requestForm.expireTime = request.expireTime
        } else {
            // 尝试转换为日期对象，然后格式化
            try {
                const date = new Date(request.expireTime)
                if (!isNaN(date.getTime())) {
                    // 格式化日期为 "YYYY-MM-DD HH:mm:ss"
                    const year = date.getFullYear()
                    const month = String(date.getMonth() + 1).padStart(2, '0')
                    const day = String(date.getDate()).padStart(2, '0')
                    const hours = String(date.getHours()).padStart(2, '0')
                    const minutes = String(date.getMinutes()).padStart(2, '0')
                    const seconds = String(date.getSeconds()).padStart(2, '0')
                    requestForm.expireTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
                } else {
                    requestForm.expireTime = ''
                }
            } catch (e) {
                console.error('日期格式化错误:', e)
                requestForm.expireTime = ''
            }
        }
    } else {
        requestForm.expireTime = ''
    }
    
    requestForm.contactInfo = request.contactInfo || ''
    requestForm.location = request.location || ''
    showRequestDialog.value = true
}

// 标记求购完成
const handleCompleteRequest = async (request) => {
    try {
        const confirm = await ElMessageBox.confirm('确定要将此求购信息标记为已完成吗？', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
        })
        
        if (confirm === 'confirm') {
            const response = await updatePurchaseRequest(request.id, {
                status: 0 // 0-已完成
            })
            
            if (response.code === 200) {
                ElMessage.success('操作成功')
                loadUserRequests()
            } else {
                ElMessage.error(response.message || '操作失败')
            }
        }
    } catch (error) {
        console.error('标记求购完成出错:', error)
        if (error !== 'cancel') {
            ElMessage.error('操作失败')
        }
    }
}

// 发布草稿
const handlePublishDraft = async (request) => {
    try {
        const confirm = await ElMessageBox.confirm('确定要发布这个草稿吗？', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'info'
        })
        
        if (confirm === 'confirm') {
            const response = await updatePurchaseRequest(request.id, {
                status: 1 // 1-进行中
            })
            
            if (response.code === 200) {
                ElMessage.success('发布成功')
                loadUserRequests()
            } else {
                ElMessage.error(response.message || '发布失败')
            }
        }
    } catch (error) {
        console.error('发布草稿出错:', error)
        if (error !== 'cancel') {
            ElMessage.error('发布失败')
        }
    }
}

// 删除求购
const handleDeleteRequest = async (request) => {
    try {
        const confirm = await ElMessageBox.confirm('确定要删除这条求购信息吗？', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
        })
        
        if (confirm === 'confirm') {
            const response = await deletePurchaseRequest(request.id)
            
            if (response.code === 200) {
                ElMessage.success('删除成功')
                loadUserRequests()
            } else {
                ElMessage.error(response.message || '删除失败')
            }
        }
    } catch (error) {
        console.error('删除求购出错:', error)
        if (error !== 'cancel') {
            ElMessage.error('删除失败')
        }
    }
}

// 提交求购表单
const handleRequestSubmit = async (type) => {
    if (!requestFormRef.value) return
    
    await requestFormRef.value.validate(async (valid) => {
        if (valid) {
            const status = type === 'active' ? 1 : 2 // 1-进行中, 2-草稿箱
            requestSubmitting.value = type
            
            try {
                let response
                const submitData = {
                    ...requestForm,
                    status
                }
                
                if (editingRequest.value) {
                    // 编辑现有求购
                    response = await updatePurchaseRequest(editingRequest.value.id, submitData)
                } else {
                    // 创建新求购
                    response = await createPurchaseRequest(submitData)
                }
                
                if (response.code === 200) {
                    ElMessage.success(type === 'active' ? '发布成功' : '已保存到草稿箱')
                    showRequestDialog.value = false
                    loadUserRequests()
                } else {
                    ElMessage.error(response.message || '操作失败')
                }
            } catch (error) {
                console.error('提交求购表单出错:', error)
                ElMessage.error('操作失败')
            } finally {
                requestSubmitting.value = false
            }
        }
    })
}

// 在menu变为buying时加载求购列表
watch(() => activeMenu.value, (newVal) => {
    if (newVal === 'buying') {
        loadUserRequests()
    }
})

// 在组件挂载时加载数据
onMounted(async () => {
    // ... existing code ...
    
    // 如果初始activeMenu是buying，加载求购列表
    if (activeMenu.value === 'buying') {
        loadUserRequests()
    }
})

// ... existing code ...
</script>

<style scoped>
/* 年龄输入框样式 */
.ios-input-number {
    width: 70%;
}

.ios-input-number :deep(.el-input__wrapper) {
    background-color: #f5f5f7 !important;
    box-shadow: none !important;
    border-radius: 8px;
}
/* 全局布局样式 */
.user-center {
    display: flex;
    width: 100%;
    height: calc(100vh - 80px); /* 与 top: 80px 保持一致 */
    background: #FFFFFF;
    overflow: hidden; 
    overflow: hidden;
    font-family: 'SF Pro Display', 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    position: fixed;
    top: 80px; /* 更精确地留出导航栏高度 */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* 侧边栏样式 */
.sidebar {
    width: 260px;
    background-color: #F9F9F9;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    padding: 24px 0;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.02);
    z-index: 2;
    position: relative;
    overflow-y: auto;
    height: 100%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar:hover {
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.05);
}

.user-profile {
    display: flex;
    align-items: center;
    padding: 0 24px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 8px;
}

.avatar {
    margin-right: 16px;
    position: relative;
    width: 60px !important;  /* 固定宽度 */
    height: 60px !important; /* 固定高度 */
    border-radius: 50% !important;
    overflow: hidden !important; /* 确保内容不溢出圆形区域 */
}

.avatar img {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    border: 2px solid #fff;
    transition: all 0.3s ease;
    display: block !important; /* 防止行内元素间隙 */
}

.avatar:hover img {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border-radius: 50% !important; /* 确保hover状态也是圆形 */
}

/* 移除在线状态指示器 */
.avatar::after {
    content: none;
}

.user-info {
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直居中 */
}

.user-info h3 {
    font-size: 30px; /* 增大字体大小 */
    margin: 0;
    font-weight: 600;
    color: #1D1D1F;
    letter-spacing: -0.2px;
}

/* 移除在线徽章样式 */
.user-badge {
    display: none;
}

.workspace {
    padding: 20px 24px 10px;
}

.workspace h4 {
    font-size: 12px;
    color: #86868B;
    text-transform: uppercase;
    margin: 0 0 12px 0;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.main-nav {
    flex: 1;
    padding: 8px 0;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0 8px 4px;
    border-radius: 10px;
}

.nav-item:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.nav-item.active {
    background-color: rgba(0, 122, 255, 0.1);
}

.nav-item i {
    font-size: 18px;
    margin-right: 12px;
    color: #86868B;
    transition: all 0.2s ease;
}

.nav-item.active i, 
.nav-item.active span {
    color: #007AFF;
    font-weight: 500;
}

.nav-item:hover i {
    transform: scale(1.1);
}

.nav-item span {
    font-size: 14px;
    color: #1D1D1F;
    font-weight: 450;
    letter-spacing: -0.2px;
}

/* 主内容区样式 */
.main-content {
    flex: 1;
    padding: 32px 40px;
    overflow-y: auto; /* 默认允许滚动 */
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    max-height: 100%;
}

/* 当个人资料页激活时，禁止主内容区滚动 */
.main-content.profile-fixed {
    overflow-y: hidden;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

.page-title {
    font-size: 28px;
    font-weight: 600;
    color: #1D1D1F;
    letter-spacing: -0.5px;
}

.header-actions {
    display: flex;
    align-items: center;
}

.new-group-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 12px;
    margin-right: 16px;
    background: #007AFF;
    border-color: #007AFF;
    padding: 10px 16px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.new-group-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.more-icon {
    font-size: 20px;
    color: #86868B;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.more-icon:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #1D1D1F;
}

/* 选项卡样式 */
.tabs {
    display: flex;
    margin-bottom: 28px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.tab {
    padding: 12px 20px;
    font-size: 14px;
    cursor: pointer;
    color: #86868B;
    border-bottom: 2px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-right: 8px;
    font-weight: 500;
}

.tab:hover {
    color: #007AFF;
}

.tab.active {
    color: #007AFF;
    border-bottom-color: #007AFF;
}

/* 任务看板样式 */
.task-board {
    display: flex;
    gap: 20px; /* 调整 gap 与 .products-list 一致 */
    overflow-x: auto;
    padding-bottom: 24px;
    animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.task-board::-webkit-scrollbar {
    height: 6px;
}

.task-board::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.task-board::-webkit-scrollbar-track {
    background: transparent;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.task-column {
    min-width: 300px; /* 移除背景色和内边距，让卡片直接显示在主内容区背景上 */
    /* background-color: #F9F9F9; */
    border-radius: 16px; /* 保留圆角可能有用 */
    /* padding: 20px; */
    flex: 1; /* 移除阴影 */
    /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* 添加一些间距，模拟 grid gap */
    padding: 0; /* 清除内边距 */
}

.task-column:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.column-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    color: #1D1D1F;
}

.task-card {    background-color: #fff;    border-radius: 16px;    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);    padding: 0;    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);    position: relative;    display: flex;    flex-direction: column;    min-height: 450px;    min-width: 280px;    border: 1px solid rgba(0, 0, 0, 0.06);    overflow: hidden;}

.task-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.task-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, #007AFF, #5AC8FA);
    opacity: 0;
    transition: all 0.3s ease;
}

.task-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px) scale(1.02);
}

.task-card:hover::before {
    opacity: 1;
}

.task-card.completed {
    border-left: none;
}

.task-card.completed::before {
    background: linear-gradient(to bottom, #34C759, #30D158);
    /* 移除 opacity: 1; 让悬浮状态处理透明度 */
}

/* 这条规则将适用于所有卡片的悬浮状态 */
.task-card:hover::before {
    opacity: 1;
}

.card-tags {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.tag {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 8px;
    font-weight: 500;
    letter-spacing: -0.2px;
}

.tag.urgent {
    background-color: rgba(255, 59, 48, 0.1);
    color: #FF3B30;
}

.tag.important {
    background-color: rgba(255, 149, 0, 0.1);
    color: #FF9500;
}

.tag.normal {
    background-color: rgba(0, 122, 255, 0.1);
    color: #007AFF;
}

.tag.success {
    background-color: rgba(52, 199, 89, 0.1);
    color: #34C759;
}

.card-title {
    font-size: 15px;
    font-weight: 500;
    margin: 0 0 12px 0;
    color: #1D1D1F;
    line-height: 1.4;
}

.card-price {
    font-size: 20px;
    font-weight: 600;
    color: #FF3B30;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}

.original-price {
    font-size: 14px;
    font-weight: normal;
    color: #86868B;
    text-decoration: line-through;
    margin-left: 8px;
}

.card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #86868B;
}

.date, .comments, .buyer {
    display: flex;
    align-items: center;
    gap: 6px;
}

.add-task {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    background-color: rgba(0, 122, 255, 0.05);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #007AFF;
    font-size: 14px;
    border: 1px dashed rgba(0, 122, 255, 0.2);
    font-weight: 500;
}

.add-task:hover {
    background-color: rgba(0, 122, 255, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.1);
}

/* 新增样式 */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    text-align: center;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
    margin-top: 24px;
    transition: all 0.3s ease;
}

.empty-state:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.empty-icon {
    font-size: 56px;
    color: #EEEEEE;
    margin-bottom: 20px;
    transition: all 0.5s ease;
}

.empty-state:hover .empty-icon {
    transform: scale(1.1) rotate(5deg);
    color: #DDDDDD;
}

.empty-state h3 {
    font-size: 20px;
    color: #1D1D1F;
    margin-bottom: 10px;
    font-weight: 500;
}

.empty-state p {
    font-size: 15px;
    color: #86868B;
}

.wallet-content {
    margin-top: 24px;
}

.balance-card {
    background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
    color: white;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 24px;
    box-shadow: 0 8px 25px rgba(0, 122, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
}

.balance-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 122, 255, 0.3);
}

.balance-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.balance-card:hover::after {
    opacity: 1;
}

.balance-title {
    font-size: 15px;
    opacity: 0.9;
    margin-bottom: 12px;
    letter-spacing: -0.3px;
}

.balance-amount {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 24px;
    letter-spacing: -0.5px;
}

.balance-actions {
    display: flex;
    gap: 12px;
}

.balance-actions .el-button {
    border-radius: 12px;
    font-weight: 500;
    padding: 10px 18px;
    transition: all 0.3s ease;
}

.balance-actions .el-button:hover {
    transform: translateY(-2px);
}

.settings-section {
    background-color: white;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-section:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.section-title {
    font-size: 18px;
    color: #1D1D1F;
    margin-bottom: 20px;
    font-weight: 600;
    letter-spacing: -0.3px;
}

.settings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 15px;
    color: #1D1D1F;
    transition: all 0.2s ease;
}

.settings-item:hover {
    background-color: rgba(0, 0, 0, 0.01);
}

.settings-item:last-child {
    border-bottom: none;
}

/* 响应式适配 */
@media (max-width: 768px) {
    .user-center {
        flex-direction: column;
    }
    
    .sidebar {
        width: 100%;
        height: auto;
        flex-direction: row;
        justify-content: space-between;
        overflow-x: auto;
        padding: 16px;
    }
    
    .user-profile, .workspace h4, .bottom-nav {
        display: none;
    }
    
    .main-nav {
        display: flex;
        padding: 0;
    }
    
    .task-board {
        flex-direction: column;
    }
    
    .task-column {
        min-width: 100%;
    }
}

/* 订单页面样式 */
.orders-page {
    padding: 20px;
}

.orders-page h2 {
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: 600;
    color: #1D1D1F;
}

/* 修改 el-tabs 为苹果风格 */
.orders-page .el-tabs__header {
    margin-bottom: 20px;
    border-bottom: none;
}

.orders-page .el-tabs__nav-wrap::after {
    display: none; /* 移除默认边框 */
}

.orders-page .el-tabs__nav {
    background-color: #F2F2F7;
    border-radius: 12px;
    padding: 4px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.orders-page .el-tabs__item {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    font-weight: 500;
    color: #8E8E93;
    transition: all 0.3s ease;
    padding: 0 15px;
}

.orders-page .el-tabs__item.is-active {
    color: #1D1D1F;
    font-weight: 600;
}

.orders-page .el-tabs__active-bar {
    display: none; /* 移除底部指示条 */
}

.orders-page .el-tabs__item.is-active {
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 收藏页面样式 */
.favorites-page {
    padding: 20px;
}

.favorites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.favorite-item {
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.favorite-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.product-info {
    padding: 10px;
}

.price {
    color: #f56c6c;
    font-size: 18px;
    font-weight: bold;
    margin: 10px 0;
}

.actions {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

/* 个人资料页面样式 */
.profile {
    background: linear-gradient(145deg, #ffffff, #f8f9fa);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
    overflow: hidden;
    transition: all 0.4s ease;
    position: relative;
}

.profile:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    transform: translateY(-5px);
}

.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    position: relative;
}

.title-wrapper {
    position: relative;
    z-index: 1;
}

.profile-header h2 {
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.7));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.title-decoration {
    height: 3px;
    width: 40px;
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.3));
    margin-top: 8px;
    border-radius: 3px;
    display: none; /* 隐藏紫色分隔线 */
}

.button-wrapper {
    position: relative;
    z-index: 1;
}

.edit-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 12px;
    padding: 10px 20px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(5px);
}

.edit-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.edit-icon {
    font-size: 16px;
}

.action-group .save-btn, .action-group .cancel-btn {
    border: none;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.action-group .save-btn {
    background: rgba(255, 255, 255, 0.25);
}

.action-group .save-btn:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.action-group .cancel-btn {
    background: rgba(0, 0, 0, 0.15);
    color: white;
}

.action-group .cancel-btn:hover {
    background: rgba(0, 0, 0, 0.25);
}

.profile-form-container {
    padding: 30px;
    background-color: white;
}

.profile-form {
    max-width: 100%;
}

.form-section {
    margin-bottom: 30px;
    background-color: #f9f9f9;
    border-radius: 16px;
    padding: 25px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}

.form-section:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    transform: translateY(-3px);
}

.avatar-container {
    display: flex;
    justify-content: center;
    background: linear-gradient(to right, #f8f9fa, #edf1f7);
}

.avatar-section {
    display: flex;
    align-items: center;
    gap: 20px;
}

.form-label {
    color: #606266;
    font-size: 16px;
    font-weight: 500;
}

.avatar-wrapper {
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.avatar-wrapper:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.avatar-image {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    transition: all 0.4s ease;
}

.avatar-placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #f0f0f0, #e6e6e6);
}

.avatar-placeholder i {
    font-size: 40px;
    color: #909399;
}

.avatar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
    color: white;
}

.avatar-wrapper:hover .avatar-overlay {
    opacity: 1;
}

.main-form {
    background: linear-gradient(145deg, #ffffff, #f9fafc);
}

.custom-input :deep(.el-input__wrapper) {
    border-radius: 12px;
    padding: 0 15px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
    border: 1px solid #e8eaec;
    transition: all 0.3s ease;
    background: white;
}

.custom-input :deep(.el-input__wrapper:hover) {
    border-color: #764ba2;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.custom-input :deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 5px 15px rgba(118, 75, 162, 0.15);
    border-color: #764ba2;
}

.custom-input :deep(.el-input__inner) {
    height: 42px;
    font-size: 14px;
}

.custom-radio :deep(.el-radio) {
    margin-right: 15px;
    padding: 8px 15px;
    border-radius: 10px;
    transition: all 0.3s ease;
    background: white;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}

.custom-radio :deep(.el-radio:hover) {
    background: #f5f7fa;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
}

.custom-radio :deep(.el-radio.is-checked) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.custom-radio :deep(.el-radio__input.is-checked .el-radio__inner) {
    background-color: white;
    border-color: white;
}

.custom-radio :deep(.el-radio__input.is-checked+.el-radio__label) {
    color: white;
}

.custom-radio :deep(.el-radio__inner::after) {
    background-color: #764ba2;
}

.custom-select :deep(.el-input__wrapper) {
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
    border: 1px solid #e8eaec;
    transition: all 0.3s ease;
    background: white;
}

.custom-select :deep(.el-input__wrapper:hover) {
    border-color: #764ba2;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.custom-select :deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 5px 15px rgba(118, 75, 162, 0.15);
    border-color: #764ba2;
}

.custom-date :deep(.el-input__wrapper) {
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
    border: 1px solid #e8eaec;
    transition: all 0.3s ease;
    background: white;
}

.custom-date :deep(.el-input__wrapper:hover) {
    border-color: #764ba2;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.custom-date :deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 5px 15px rgba(118, 75, 162, 0.15);
    border-color: #764ba2;
}

.custom-textarea :deep(.el-textarea__inner) {
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
    border: 1px solid #e8eaec;
    transition: all 0.3s ease;
    padding: 12px 15px;
    background: white;
}

.custom-textarea :deep(.el-textarea__inner:hover) {
    border-color: #764ba2;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.custom-textarea :deep(.el-textarea__inner:focus) {
    box-shadow: 0 5px 15px rgba(118, 75, 162, 0.15);
    border-color: #764ba2;
}

.el-form-item :deep(.el-form-item__label) {
    font-weight: 500;
    color: #5b6678;
}

.el-form-item :deep(.el-form-item__error) {
    color: #ff5722;
}

/* 消息列表样式 */
.messages-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
}

.message-item {
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    padding: 20px;
    transition: all 0.3s ease;
    border-left: 3px solid #2468f2; /* 所有消息都添加蓝色边框 */
    position: relative;
    margin-bottom: 15px; /* 增加消息之间的间距 */
}

.message-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.message-item.unread {
    border-left-color: #2468f2;
    background-color: #f8fbff; /* 未读消息背景色更浅一些 */
}

.message-item.unread::before {
    content: '';
    position: absolute;
    top: 20px;
    right: 20px;
    width: 8px;
    height: 8px;
    background-color: #2468f2;
    border-radius: 50%;
}

.message-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #333;
}

.message-text {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 15px;
}

.message-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #999;
}

.message-time {
    font-size: 12px;
    color: #999;
}

/* 钱包交易记录样式 */
.wallet-content {
    padding: 20px;
}

.balance-card {
    background: linear-gradient(135deg, #1E88E5, #1565C0);
    color: white;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 8px 20px rgba(30, 136, 229, 0.2);
    position: relative;
    overflow: hidden;
}

.balance-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 80%);
    opacity: 0.5;
}

.balance-title {
    font-size: 16px;
    margin-bottom: 15px;
    opacity: 0.8;
}

.balance-amount {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.balance-actions {
    display: flex;
    gap: 10px;
}

.transactions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.transaction-item {
    background: #FFFFFF;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.transaction-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.transaction-info {
    flex: 1;
}

.transaction-description {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 5px;
}

.transaction-time {
    font-size: 12px;
    color: #999;
}

.transaction-amount {
    font-size: 16px;
    font-weight: 600;
}

.transaction-amount.income {
    color: #67C23A;
}

.transaction-amount.expense {
    color: #F56C6C;
}

/* 加载状态样式 */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    color: #909399;
}

.loading-icon {
    font-size: 40px;
    margin-bottom: 20px;
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.loading-more, .load-more, .no-more {
    text-align: center;
    padding: 15px 0;
    color: #909399;
    font-size: 14px;
}

.load-more {
    cursor: pointer;
    color: #409EFF;
}

.load-more:hover {
    text-decoration: underline;
}

/* 添加全部商品网格布局样式 */
.products-list {    display: grid;    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 增加卡片最小宽度 */    gap: 35px; /* 增加卡片间距 */    min-height: 400px;    margin-top: 20px;}

/* 筛选按钮样式 */
.filter-button-wrapper {
    margin-right: 16px;
}

.filter-button {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    background-color: #f0f4ff;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.3s;
}

.filter-button:hover {
    background-color: #e0e7ff;
}

.filter-button span {
    margin-right: 4px;
}

.school-select-wrapper {
    margin-right: 16px;
}

.school-select-button {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    background-color: #f0f4ff;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.3s;
}

.school-select-button:hover {
    background-color: #e0e7ff;
}

.school-select-button span {
    margin-right: 4px;
}

.status-select-wrapper {
    margin-right: 16px;
}

.status-select-button {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    background-color: #f0f4ff;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.3s;
}

.status-select-button:hover {
    background-color: #e0e7ff;
}

.status-select-button span {
    margin-right: 4px;
}

.task-card {    background-color: #fff;    border-radius: 16px;    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);    padding: 0;    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);    position: relative;    display: flex;    flex-direction: column;    min-height: 480px; /* 增加卡片高度 */    min-width: 300px; /* 增加卡片最小宽度 */    border: 1px solid rgba(0, 0, 0, 0.06);    overflow: hidden;}.task-card:hover {    transform: translateY(-4px) scale(1.02);    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);}

/* 求购页面样式 */
.buying-page {
    padding: 0;
}

/* Apple风格弹窗样式 */
.apple-style-dialog :deep(.el-dialog) {
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.apple-style-dialog :deep(.el-dialog__header) {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(248, 248, 248, 0.8);
    backdrop-filter: blur(10px);
    text-align: center;
}

.apple-style-dialog :deep(.el-dialog__title) {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.apple-style-dialog :deep(.el-dialog__body) {
    padding: 24px;
}

.apple-style-dialog :deep(.el-form-item) {
    margin-bottom: 20px;
}

.apple-style-dialog :deep(.el-form-item__label) {
    color: #333;
    font-weight: 500;
}

.apple-style-input {
    transition: all 0.3s;
}

.apple-style-input :deep(.el-input__wrapper) {
    border-radius: 10px;
    border: 1px solid #dcdfe6;
    box-shadow: none;
    transition: all 0.3s;
}



.apple-style-textarea {
    transition: all 0.3s;
}

.apple-style-textarea :deep(.el-textarea__inner) {
    border-radius: 10px;
    border: 1px solid #dcdfe6;
    box-shadow: none;
    transition: all 0.3s;
}

.apple-style-textarea :deep(.el-textarea__inner:hover),
.apple-style-textarea :deep(.el-textarea__inner:focus) {
    border-color: #409eff;
    box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
}

.apple-style-select {
    border-radius: 10px;
}


.apple-style-dialog :deep(.el-dialog__footer) {
    padding: 16px 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(248, 248, 248, 0.8);
    backdrop-filter: blur(10px);
}

.apple-style-btn {
    border-radius: 10px;
    font-weight: 500;
    padding: 10px 20px;
    transition: all 0.3s;
}

.apple-style-btn.confirm-btn {
    background: linear-gradient(135deg, #42a6ff, #0077ff);
    border: none;
    box-shadow: 0 2px 6px rgba(0, 102, 255, 0.2);
}

.apple-style-btn.cancel-btn {
    background: rgba(142, 142, 147, 0.12);
    color: #333;
    border: none;
}

.apple-style-btn.confirm-btn:hover {
    background: linear-gradient(135deg, #3a95e9, #0066dd);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 102, 255, 0.3);
}

.apple-style-btn.cancel-btn:hover {
    background: rgba(142, 142, 147, 0.18);
    transform: translateY(-1px);
}

.form-item-tips {
    font-size: 12px;
    color: #909399;
    line-height: 1.4;
    margin-top: 4px;
}

.location-input-container {
    position: relative;
}

.location-status {
    margin-top: 8px;
}

.buying-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
}

.buying-item {
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.buying-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.buying-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 12px;
}

.buying-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.buying-content {
    margin-bottom: 16px;
}

.buying-price {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

.buying-price .price {
    font-size: 18px;
    font-weight: 600;
    color: #FF3B30;
    margin-right: 4px;
}

.buying-price .max-price {
    font-size: 16px;
    color: #FF3B30;
    opacity: 0.8;
}

.buying-desc {
    margin-bottom: 16px;
}

.buying-desc p {
    margin: 8px 0 0;
    color: #666;
    line-height: 1.5;
}

.buying-tags {
    margin-bottom: 16px;
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.label {
    font-size: 14px;
    color: #999;
    margin-right: 8px;
}

.value {
    font-size: 14px;
    color: #333;
}

.buying-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #999;
    margin-bottom: 12px;
}

.meta-info {
    display: flex;
    gap: 16px;
}

.date, .matches, .views {
    display: flex;
    align-items: center;
    gap: 6px;
}

.contact-preference {
    padding-top: 12px;
    border-top: 1px dashed #f0f0f0;
}

.buying-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid #f0f0f0;
    padding-top: 16px;
}

/* 筛选条件样式 */
.filter-bar {
    margin: 16px 0;
    padding: 16px;
    background-color: #f9f9f9;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.filter-section {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.filter-label {
    min-width: 70px;
    font-size: 14px;
    color: #606266;
    margin-top: 5px;
}

.filter-options {
    display: flex;
    gap: 20px;
}

.filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 100%;
}

.filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px dashed #e0e0e0;
}

.request-item {
  border: 1px solid #eee;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 4px;
}

.loading-container {
  padding: 20px;
}

.list-container {
  padding: 0 10px;
}
.load-more, .no-more {
  text-align: center;
  padding: 15px;
  color: #999;
  cursor: pointer;
}
.load-more:hover {
    color: var(--el-color-primary);
}
.no-more {
    cursor: default;
}

/* 我的收藏样式 */
.favorites-page {
    padding: 20px;
}

.favorites-page h2 {
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: 600;
    color: #333;
}

.favorite-item {
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.favorite-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.favorite-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.favorite-info {
    padding: 12px;
}

.favorite-info h4 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 22px;
}

.favorite-info .price {
    color: #f56c6c;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
}

.favorite-info .description {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 19px;
}

.favorite-info .bottom-info {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
    margin-bottom: 12px;
}

.favorite-info .actions {
    display: flex;
    justify-content: space-between;
}

.favorite-info .actions .el-button {
    border-radius: 18px;
}

.condition-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    background-color: #2468f2; /* 统一使用蓝色 */
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    z-index: 1;
}

.favorite-btn {
    display: none; /* 隐藏收藏按钮 */
}

.star-icon {
    display: none; /* 隐藏星标图标 */
}

/* 苹果风格的求购卡片样式 */
.buying-page {
    padding: 20px;
}

.ios-segment-control {
    display: flex;
    background-color: #f0f0f3;
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 24px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.segment-item {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
    color: #8e8e93;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.segment-item.active {
    background-color: #ffffff;
    color: #000000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.buying-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 16px;
}

.buying-card {
    position: relative;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 200px;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.buying-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.card-status {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.status-active {
    background: linear-gradient(to right, #34C759, #30D158);
}

.status-completed {
    background: linear-gradient(to right, #007AFF, #5AC8FA);
}

.status-draft {
    background: linear-gradient(to right, #FF9500, #FFCC00);
}

.card-content {
    padding: 20px;
    flex: 1;
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    color: #1D1D1F;
    margin-bottom: 10px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-price {
    font-size: 22px;
    font-weight: 700;
    color: #FF375F;
    margin-bottom: 12px;
}

.card-description {
    font-size: 14px;
    color: #86868B;
    line-height: 1.6;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.urgent-tag {
    background-color: #FF375F;
    color: white;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 500;
}

.item-tag {
    background-color: #F2F2F7;
    color: #8E8E93;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 500;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #F2F2F7;
    padding-top: 12px;
}

.card-date {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #8E8E93;
    font-size: 12px;
}

.card-status-text {
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}

.status-active-text {
    color: #34C759;
    background-color: rgba(52, 199, 89, 0.1);
}

.status-completed-text {
    color: #007AFF;
    background-color: rgba(0, 122, 255, 0.1);
}

.status-draft-text {
    color: #FF9500;
    background-color: rgba(255, 149, 0, 0.1);
}

.card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    background-color: #F9F9FB;
    border-top: 1px solid #F2F2F7;
    position: absolute;
    right: 0;
    top: 0;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 0 0 0 8px;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.1);
}

.card-buttons {
    display: flex;
    gap: 8px;
}

.edit-button {
    background-color: #0A84FF;
    color: white;
}

.ios-action-button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #007AFF;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.ios-action-button:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.ios-action-button.danger {
    color: #FF375F;
}

.ios-button {
    background: #007AFF;
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.ios-button:hover {
    background: #0062CC;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.ios-load-more {
    grid-column: 1 / -1;
    text-align: center;
    padding: 16px;
    cursor: pointer;
    color: #007AFF;
    font-weight: 500;
    border-radius: 12px;
    background-color: rgba(0, 122, 255, 0.05);
    transition: all 0.2s ease;
}

.ios-load-more:hover {
    background-color: rgba(0, 122, 255, 0.1);
}

.ios-no-more {
    grid-column: 1 / -1;
    text-align: center;
    padding: 16px;
    color: #8E8E93;
    font-weight: 500;
}

/* 修改卡片内容区域，添加预算显示 */
.card-content {
    padding: 20px;
    flex: 1;
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    color: #1D1D1F;
    margin-bottom: 10px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-price {
    font-size: 22px;
    font-weight: 700;
    color: #FF375F;
    margin-bottom: 12px;
}

.card-description {
    font-size: 14px;
    color: #86868B;
    line-height: 1.6;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.urgent-tag {
    background-color: #FF375F;
    color: white;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 500;
}

.item-tag {
    background-color: #F2F2F7;
    color: #8E8E93;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 500;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #F2F2F7;
    padding-top: 12px;
}

.card-date {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #8E8E93;
    font-size: 12px;
}

.card-status-text {
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}

.status-active-text {
    color: #34C759;
    background-color: rgba(52, 199, 89, 0.1);
}

.status-completed-text {
    color: #007AFF;
    background-color: rgba(0, 122, 255, 0.1);
}

.status-draft-text {
    color: #FF9500;
    background-color: rgba(255, 149, 0, 0.1);
}

.card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    background-color: #F9F9FB;
    border-top: 1px solid #F2F2F7;
}

.ios-action-button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #007AFF;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.ios-action-button:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.ios-action-button.danger {
    color: #FF375F;
}

.ios-button {
    background: #007AFF;
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.ios-button:hover {
    background: #0062CC;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.ios-load-more {
    grid-column: 1 / -1;
    text-align: center;
    padding: 16px;
    cursor: pointer;
    color: #007AFF;
    font-weight: 500;
    border-radius: 12px;
    background-color: rgba(0, 122, 255, 0.05);
    transition: all 0.2s ease;
}

.ios-load-more:hover {
    background-color: rgba(0, 122, 255, 0.1);
}

.ios-no-more {
    grid-column: 1 / -1;
    text-align: center;
    padding: 16px;
    color: #8E8E93;
    font-weight: 500;
}

/* 修改CSS样式，添加预算和日期样式 */
.card-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.card-price {
    font-size: 22px;
    font-weight: 700;
    color: #FF375F;
}

.card-budget {
    font-size: 16px;
    font-weight: 500;
    color: #8E8E93;
}

.card-budget-container {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    background-color: #F5F5F7;
    padding: 8px 12px;
    border-radius: 8px;
}

.budget-label {
    font-size: 16px;
    color: #86868B;
    margin-right: 6px;
}

.budget-value {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
}


/* 加载动画样式 */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.el-icon.is-loading {
    animation: rotate 1s linear infinite;
}

.card-image-container {    width: 100%;    height: 280px; /* 增加高度显示更多图片内容 */    overflow: hidden;    /* 图片容器顶部圆角与卡片一致，底部不需要 */    border-top-left-radius: 16px;     border-top-right-radius: 16px;    margin-bottom: 0; /* 移除下边距，让内容区的 padding 控制间距 */    position: relative; /* 为编辑按钮定位 */}

.card-image {    width: 100%;    height: 100%;    object-fit: cover;    display: block; /* 移除图片底部的空白 */    transition: transform 0.5s ease; /* 增加过渡时间，使放大效果更平滑 */}.task-card:hover .card-image {    transform: scale(1.08); /* 增加图片悬浮放大比例 */}

/* 新增的图片上的编辑按钮 */
.image-edit-button {    position: absolute;    top: 20px;    right: 20px;    z-index: 10;    opacity: 0;    transform: translateY(-10px);    transition: all 0.3s ease;}/* 鼠标悬浮在卡片上时显示编辑按钮 */.task-card:hover .image-edit-button {    opacity: 1;    transform: translateY(0);}

/* 编辑按钮样式 */
.image-edit-button .el-button {
    background-color: rgba(0, 122, 255, 0.9);
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.image-edit-button .el-button:hover {
    background-color: #007AFF;
    transform: scale(1.1);
}

/* 卡片内容区域 */
.card-content-area {    padding: 16px 20px 20px; /* 调整内边距，左右 20px，上下 16/20px */    flex: 1;    display: flex;    flex-direction: column;}/* 底部操作按钮区域 */.card-footer-actions {    padding: 12px 20px;    background-color: #f8f8fa;    display: flex;    justify-content: flex-end;    border-top: 1px solid #eeeeee;    margin-top: auto;}.card-footer-actions .el-button {    transition: all 0.3s ease;}.card-footer-actions .el-button:hover {    transform: translateY(-2px);    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}

/* 发布商品模态框样式 */
.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

:deep(.el-upload--picture-card) {
    --el-upload-picture-card-size: 100px;
}

:deep(.el-upload-list--picture-card .el-upload-list__item) {
    --el-upload-list-picture-card-size: 100px;
}

/* --- Apple Style Overrides --- */

/* 定义颜色和圆角变量 */
:root {
    --apple-blue: #007AFF;
    --apple-gray-light: #f2f2f7;
    --apple-gray-medium: #e5e5ea;
    --apple-gray-dark: #8e8e93;
    --apple-border-radius: 12px; /* 更圆润的边角 */
    --apple-input-bg: #ffffff;
    --apple-input-border: #d1d1d6;
}

/* 模态框整体 - 调整为与登录组件一致 */
:deep(.el-dialog) {
    border-radius: 30px !important;
    overflow: hidden;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    background: #ffffff;
    animation: boxAppear 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes boxAppear {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

:deep(.el-dialog__header) {
    padding: 24px 30px;
    margin-right: 0;
    border-bottom: 1px solid #e5e7eb;
    background-color: #fff;
    text-align: center;
}

:deep(.el-dialog__title) {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: 0.5px;
    position: relative;
    display: inline-block;
}

:deep(.el-dialog__title)::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #a855f7);
    transform: translateX(-50%);
    border-radius: 3px;
}

:deep(.el-dialog__headerbtn) {
    top: 20px;
    right: 20px;
}

:deep(.el-dialog__headerbtn .el-dialog__close) {
    color: #94a3b8;
    font-size: 18px;
    transition: all 0.3s ease;
}

:deep(.el-dialog__headerbtn:hover .el-dialog__close) {
    color: #6366f1;
    transform: rotate(90deg);
}

:deep(.el-dialog__body) {
    padding: 30px 40px;
    background-color: #fff;
}

:deep(.el-dialog__footer) {
    padding: 20px 40px;
    border-top: 1px solid #e5e7eb;
    background-color: #fff;
}

/* 表单项 */
:deep(.el-form-item) {
    margin-bottom: 24px;
}

:deep(.el-form-item:last-child) {
    margin-bottom: 0;
}

:deep(.el-form-item__label) {
    color: #64748b;
    font-weight: 600;
    font-size: 15px;
    padding-bottom: 8px;
    line-height: 1.4;
    letter-spacing: 0.2px;
}

:deep(.el-form-item__error) {
    font-size: 13px;
    color: #ef4444;
    padding-top: 6px;
    padding-left: 6px;
}

/* 输入框样式与登录组件保持一致 */
:deep(.el-input__wrapper), 
:deep(.el-input-number), 
:deep(.el-textarea__inner) {
    background: #f8fafc !important;
    border: 2px solid transparent !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 8px 16px;
    position: relative;
    overflow: hidden;
}

:deep(.el-input__wrapper)::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: 0.6s;
}

:deep(.el-input__wrapper:hover)::after {
    left: 100%;
}

:deep(.el-input__wrapper:hover), 
:deep(.el-input-number:hover), 
:deep(.el-textarea__inner:hover) {
    background: #fff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    transform: translateY(-2px);
}

:deep(.el-input__inner), :deep(.el-textarea__inner) {
    color: #1e293b;
    height: 38px;
    font-size: 15px;
    padding-left: 8px;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
}

:deep(.el-input__inner::placeholder), :deep(.el-textarea__inner::placeholder) {
    color: #94a3b8;
    font-weight: 400;
    font-size: 14px;
}

:deep(.el-textarea__inner) {
    padding-top: 10px;
    padding-bottom: 10px;
    min-height: 95px !important;
    line-height: 1.6;
}

/* 焦点状态与登录组件一致 */
:deep(.el-input__wrapper.is-focus), 
:deep(.el-input-number.is-focus), 
:deep(.el-textarea__inner:focus) {
    background: #fff !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
    transform: translateY(-2px);
}

/* 统一输入框内元素样式 */
:deep(.el-input__prefix-inner),
:deep(.el-input__suffix-inner) {
    font-size: 16px;
    color: #94a3b8;
    transition: all 0.3s ease;
}

:deep(.el-input__wrapper.is-focus .el-input__prefix-inner),
:deep(.el-input__wrapper.is-focus .el-input__suffix-inner) {
    color: #6366f1;
}

/* 下拉选择框 */
:deep(.el-select .el-input__wrapper) {
    /* 继承输入框样式 */
}

:deep(.el-select:hover .el-input__wrapper) {
    background: #fff !important;
    border-color: #e2e8f0 !important;
}

:deep(.el-select.is-focus .el-input__wrapper) {
    background: #fff !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
}

/* 下拉箭头 */
:deep(.el-select .el-input__suffix) {
    transition: all 0.3s ease;
}

:deep(.el-select .el-input__suffix-inner) {
    color: #94a3b8;
    transition: all 0.3s ease;
}

:deep(.el-select.is-focus .el-input__suffix-inner) {
    color: #6366f1;
    transform: rotate(180deg);
}

/* 图片上传 */
:deep(.el-upload--picture-card) {
    border-radius: 18px;
    border: 2px dashed #e2e8f0;
    background-color: #f8fafc;
    transition: all 0.3s ease;
    width: 102px;
    height: 102px;
    --el-upload-picture-card-size: 102px;
    overflow: hidden;
}

:deep(.el-upload--picture-card:hover) {
    border-color: #6366f1;
    background-color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

:deep(.el-upload--picture-card .el-icon) {
    font-size: 24px;
    color: #94a3b8;
    transition: all 0.3s ease;
}

:deep(.el-upload--picture-card:hover .el-icon) {
    color: #6366f1;
    transform: scale(1.1);
}

:deep(.el-upload-list--picture-card .el-upload-list__item) {
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    width: 102px;
    height: 102px;
    --el-upload-list-picture-card-size: 102px;
    overflow: hidden;
    transition: all 0.3s ease;
}

:deep(.el-upload-list--picture-card .el-upload-list__item:hover) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

:deep(.el-upload-list__item-status-label) {
    background-color: rgba(99, 102, 241, 0.7);
}

/* 必填星号 */
:deep(.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before) {
    color: #f43f5e;
    margin-right: 6px;
}

/* 数字输入框 */
:deep(.el-input-number .el-input-number__decrease),
:deep(.el-input-number .el-input-number__increase) {
    background-color: transparent;
    border: none;
    color: #94a3b8;
    transition: all 0.3s ease;
}

:deep(.el-input-number .el-input-number__decrease:hover),
:deep(.el-input-number .el-input-number__increase:hover) {
    color: #6366f1;
    background-color: rgba(99, 102, 241, 0.08);
}

:deep(.el-input-number.is-disabled .el-input-number__decrease),
:deep(.el-input-number.is-disabled .el-input-number__increase) {
    color: #cbd5e1;
}

/* 底部按钮 */
.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
}

:deep(.el-button) {
    border-radius: 18px;
    height: 44px;
    padding: 0 24px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    position: relative;
    overflow: hidden;
}

:deep(.el-button::before) {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: 0.5s;
}

:deep(.el-button:hover::before) {
    left: 100%;
}

/* 主要按钮 (发布) */
:deep(.el-button--primary) {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: white;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
}

:deep(.el-button--primary:hover) {
    background: linear-gradient(135deg, #4f46e5, #9333ea);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.4);
    letter-spacing: 1.5px;
}

:deep(.el-button--primary:active) {
    transform: translateY(0);
    box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
}

/* 次要按钮 (取消, 存草稿) */
:deep(.el-button:not(.el-button--primary)) {
    background-color: #f1f5f9;
    color: #475569;
    font-weight: 500;
}

:deep(.el-button:not(.el-button--primary):hover) {
    background-color: #e2e8f0;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    color: #1e293b;
}

:deep(.el-button:not(.el-button--primary):active) {
    background-color: #cbd5e1;
    transform: translateY(0);
}

/* 禁用状态 */
:deep(.el-button.is-disabled) {
    opacity: 0.6;
    transform: none;
    cursor: not-allowed;
}

/* 下拉选项样式 */
:deep(.el-select-dropdown) {
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

:deep(.el-select-dropdown__item) {
    font-size: 14px;
    color: #475569;
    height: 38px;
    line-height: 38px;
    padding: 0 16px;
    transition: all 0.2s ease;
}

:deep(.el-select-dropdown__item.hover),
:deep(.el-select-dropdown__item:hover) {
    background-color: rgba(99, 102, 241, 0.08);
    color: #6366f1;
}

:deep(.el-select-dropdown__item.selected) {
    background-color: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    font-weight: 600;
}

/* 表单动画 */
:deep(.el-form-item) {
    transform-origin: center;
    animation: formItemFadeIn 0.4s ease forwards;
    opacity: 0;
    transform: translateY(10px);
}

:deep(.el-form-item:nth-child(1)) {
    animation-delay: 0.1s;
}

:deep(.el-form-item:nth-child(2)) {
    animation-delay: 0.15s;
}

:deep(.el-form-item:nth-child(3)) {
    animation-delay: 0.2s;
}

:deep(.el-form-item:nth-child(4)) {
    animation-delay: 0.25s;
}

:deep(.el-form-item:nth-child(5)) {
    animation-delay: 0.3s;
}

:deep(.el-form-item:nth-child(6)) {
    animation-delay: 0.35s;
}

:deep(.el-form-item:nth-child(7)) {
    animation-delay: 0.4s;
}

:deep(.el-form-item:nth-child(8)) {
    animation-delay: 0.45s;
}

@keyframes formItemFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.publish-dialog .dialog-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    z-index: 10;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(249, 250, 251, 0.8);
    transition: all 0.3s ease;
    color: #94a3b8;
}

.publish-dialog .dialog-close-btn:hover {
    background-color: #f1f5f9;
    color: #6366f1;
    transform: rotate(90deg);
}

/* 调整内容区域的填充，由于移除了标题 */
.publish-dialog :deep(.el-dialog__body) {
    padding: 10px 10px 30px;
}

/* 确保关闭按钮在滚动时保持固定 */
.publish-dialog {
    position: relative;
}

/* 价格输入框特殊样式 */
.premium-price-input {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 18px;
    background: #f8fafc;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    overflow: hidden;
}

.premium-price-input:hover {
    background: #fff;
    border-color: #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

.premium-price-input:focus-within {
    background: #fff;
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
    transform: translateY(-2px);
}

.premium-price-input .currency-symbol {
    font-size: 16px;
    font-weight: 500;
    color: #64748b;
    padding-left: 16px;
    padding-right: 6px;
}

.premium-price-input:focus-within .currency-symbol {
    color: #6366f1;
}

.premium-price-input .price-input {
    flex: 1;
    width: 100%;
    --el-input-height: 38px;
}

.premium-price-input .price-input :deep(.el-input) {
    height: 38px;
}

.premium-price-input .price-input :deep(.el-input__wrapper) {
    box-shadow: none !important;
    border: none !important;
    padding: 0 16px 0 0;
    height: 38px;
    background: transparent !important;
}

.premium-price-input .price-input :deep(.el-input__wrapper:hover),
.premium-price-input .price-input :deep(.el-input__wrapper.is-focus) {
    box-shadow: none !important;
    background: transparent !important;
    transform: none;
}

.premium-price-input .price-input :deep(.el-input__inner) {
    height: 38px;
    line-height: 38px;
    font-size: 16px;
    font-weight: 500;
    color: #1e293b;
    padding-left: 0;
}

.premium-price-input .price-input :deep(.el-input__inner::placeholder) {
    color: #94a3b8;
    font-weight: 400;
}

.cart-btn {
    background-color: #2468f2 !important;
    border-color: #2468f2 !important;
}

.unfavorite-btn {
    background-color: #f2f6fc !important;
    border-color: #dcdfe6 !important;
    color: #606266 !important;
}

/* 个人资料页样式 */
.profile-content {
    padding: 16px;
    max-width: 800px;
    margin: 0 auto;
}

.profile-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-card {
    background-color: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.profile-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.profile-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.profile-card-header h3 {
    margin: 0;
    font-size: 18px;
    color: #1d1d1f;
    font-weight: 500;
}

.profile-card-content {
    padding: 20px;
}

.avatar-container {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.avatar-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
}

.profile-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transition: all 0.3s;
}

.avatar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
    cursor: pointer;
    color: white;
    border-radius: 50%;
}

.avatar-wrapper:hover .avatar-overlay {
    opacity: 1;
}

.avatar-overlay .el-icon {
    font-size: 24px;
    margin-bottom: 4px;
}

.locked-input {
    padding: 10px;
    background-color: #f5f5f7;
    border-radius: 8px;
    color: #1d1d1f;
    font-size: 14px;
}

.header-actions {
    display: flex;
    gap: 10px;
}

/* 苹果风格的个人资料页样式 */
.profile-content {
    padding: 16px;
    max-width: 800px;
    margin: 0 auto;
    background-color: #ffffff;
}

.profile-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 头像部分卡片 */
.profile-header-card {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
    padding: 20px;
    text-align: center;
}

.avatar-upload-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.avatar-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 4px solid #fff;
}

.profile-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.avatar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
    cursor: pointer;
    color: white;
    border-radius: 50%;
}

.avatar-wrapper:hover .avatar-overlay {
    opacity: 1;
}

.avatar-overlay .el-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.user-nickname {
    font-size: 20px;
    font-weight: 500;
    color: #1d1d1f;
    margin-bottom: 8px;
}

/* iOS风格卡片 */
.ios-card {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
}

.ios-card-header {
    padding: 16px 20px;
    background-color: #f9f9f9;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.ios-card-header h3 {
    margin: 0;
    font-size: 17px;
    color: #1d1d1f;
    font-weight: 600;
}

.ios-card-content {
    padding: 0;
}

/* iOS表单组件样式 */
.ios-form-group {
    display: flex;
    padding: 14px 20px;
    align-items: center;
}

.ios-form-label {
    width: 100px;
    color: #1d1d1f;
    font-size: 15px;
    font-weight: 400;
}

.ios-form-input {
    flex: 1;
}

.required-mark {
    color: #ff3b30;
    margin-left: 2px;
}

.ios-separator {
    height: 1px;
    background-color: rgba(0, 0, 0, 0.05);
    margin-left: 20px;
}

.ios-input,
.ios-select,
.ios-date-picker {
    width: 100%;
    border: none;
    border-radius: 8px;
    background-color: #f5f5f7;
}

.ios-radio-group {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
}

.ios-date-input {
    display: flex;
}

.ios-textarea {
    width: 100%;
    background-color: #f5f5f7;
    border: none;
    border-radius: 8px;
    resize: none;
}

.ios-locked-input {
    padding: 10px 12px;
    background-color: #f5f5f7;
    border-radius: 8px;
    color: #86868b;
    font-size: 14px;
}

/* 编辑按钮样式 */
.header-actions .el-button {
    padding: 8px 20px;
    font-weight: 500;
}

.header-actions .el-button--primary {
    background-color: #007aff;
    border-color: #007aff;
}

/* 覆盖Element Plus默认样式 */
:deep(.el-input__wrapper) {
    background-color: #f5f5f7 !important;
    box-shadow: none !important;
    padding: 8px 12px;
}

:deep(.el-input__inner) {
    color: #1d1d1f;
}

:deep(.el-radio__input.is-checked .el-radio__inner) {
    background-color: #007aff;
    border-color: #007aff;
}

:deep(.el-radio__label) {
    color: #1d1d1f;
}

:deep(.el-select__wrapper) {
    background-color: #f5f5f7 !important;
    box-shadow: none !important;
}

:deep(.el-textarea__inner) {
    background-color: #f5f5f7;
    box-shadow: none;
    padding: 12px;
    color: #1d1d1f;
}

@media (max-width: 768px) {
    .ios-form-group {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .ios-form-label {
        width: 100%;
        margin-bottom: 8px;
    }
    
    .ios-form-input {
        width: 100%;
    }
}

/* 苹果风格的个人资料页样式 */
.profile-content {
    padding: 16px;
    max-width: 100%;
    margin: 0 auto;
    background-color: #f2f2f7;
}

.profile-form {
    display: flex;
    flex-direction: column;
}

/* 双列布局 */
.profile-layout {
    display: flex;
    gap: 20px;
}

.profile-left-column, 
.profile-right-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 头像部分卡片 */
.profile-header-card {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
}

.avatar-upload-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.avatar-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 4px solid #fff;
}

.profile-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.avatar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
    cursor: pointer;
    color: white;
    border-radius: 50%;
}

.avatar-wrapper:hover .avatar-overlay {
    opacity: 1;
}

.avatar-overlay .el-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.user-nickname {
    font-size: 20px;
    font-weight: 500;
    color: #1d1d1f;
    margin-bottom: 8px;
}

/* iOS风格卡片 */
.ios-card {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.flex-grow {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.flex-grow .ios-card-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.flex-grow .ios-form-group {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.flex-grow .ios-form-input {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.flex-grow .ios-textarea {
    flex-grow: 1;
    height: 100%;
}

.ios-card-header {
    padding: 16px 20px;
    background-color: #f9f9f9;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.ios-card-header h3 {
    margin: 0;
    font-size: 17px;
    color: #1d1d1f;
    font-weight: 600;
}

.ios-card-content {
    padding: 0;
}

/* iOS表单组件样式 */
.ios-form-group {
    display: flex;
    padding: 14px 20px;
    align-items: center;
}

.ios-form-label {
    width: 100px;
    color: #1d1d1f;
    font-size: 15px;
    font-weight: 400;
}

.ios-form-input {
    flex: 1;
}

.required-mark {
    color: #ff3b30;
    margin-left: 2px;
}

.ios-separator {
    height: 1px;
    background-color: rgba(0, 0, 0, 0.05);
    margin-left: 20px;
}

.ios-input,
.ios-select,
.ios-date-picker {
    width: 100%;
    border: none;
    border-radius: 8px;
    background-color: #f5f5f7;
}

.ios-radio-group {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
}

.ios-date-input {
    display: flex;
}

.ios-textarea {
    width: 100%;
    background-color: #f5f5f7;
    border: none;
    border-radius: 8px;
    resize: none;
}

.ios-locked-input {
    padding: 10px 12px;
    background-color: #f5f5f7;
    border-radius: 8px;
    color: #86868b;
    font-size: 14px;
}

/* 账号安全相关样式 */
.account-status {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
}

.status-active {
    background-color: #34C759;
    color: white;
}

.status-text {
    color: #86868b;
    font-size: 14px;
}

.account-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background-color: #f5f5f7;
    border-radius: 8px;
    font-size: 14px;
    color: #007aff;
    cursor: pointer;
    transition: background-color 0.2s;
}

.account-action:hover {
    background-color: #e9e9eb;
}

/* 编辑按钮样式 */
.header-actions .el-button {
    padding: 8px 20px;
    font-weight: 500;
}

.header-actions .el-button--primary {
    background-color: #007aff;
    border-color: #007aff;
}

/* 覆盖Element Plus默认样式 */
:deep(.el-input__wrapper) {
    background-color: #f5f5f7 !important;
    box-shadow: none !important;
    padding: 8px 12px;
}

:deep(.el-input__inner) {
    color: #1d1d1f;
}

:deep(.el-radio__input.is-checked .el-radio__inner) {
    background-color: #007aff;
    border-color: #007aff;
}

:deep(.el-radio__label) {
    color: #1d1d1f;
}

:deep(.el-select__wrapper) {
    background-color: #f5f5f7 !important;
    box-shadow: none !important;
}

:deep(.el-textarea__inner) {
    background-color: #f5f5f7;
    box-shadow: none;
    padding: 12px;
    color: #1d1d1f;
}

/* 响应式调整 */
@media (max-width: 1200px) {
    .profile-layout {
        flex-direction: column;
    }
    
    .profile-left-column, 
    .profile-right-column {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .ios-form-group {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .ios-form-label {
        width: 100%;
        margin-bottom: 8px;
    }
    
    .ios-form-input {
        width: 100%;
    }
}

/* 苹果风格的个人资料页样式 */
.profile-content {
    padding: 0;
    width: 100%;
    margin: 0;
    background-color: #f2f2f7;
}

.full-width {
    max-width: 100%;
}

.profile-form {
    display: flex;
    flex-direction: column;
}

/* 网格布局 */
.profile-grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 12px;
    padding: 12px;
}

/* 头像部分卡片 */
.profile-header-card {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
}

.avatar-upload-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.avatar-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 4px solid #fff;
}

.profile-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.avatar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
    cursor: pointer;
    color: white;
    border-radius: 50%;
}

.avatar-wrapper:hover .avatar-overlay {
    opacity: 1;
}

.avatar-overlay .el-icon {
    font-size: 24px;
    margin-bottom: 6px;
}

.user-nickname {
    font-size: 18px;
    font-weight: 500;
    color: #1d1d1f;
    margin-bottom: 6px;
}

.user-status {
    margin-bottom: 12px;
}

.user-stats {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-top: 12px;
}

.stat-item {
    text-align: center;
}

.stat-value {
    font-size: 18px;
    font-weight: 600;
    color: #007aff;
}

.stat-label {
    font-size: 12px;
    color: #8e8e93;
    margin-top: 4px;
}

/* iOS风格卡片 */
.ios-card {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ios-card-header {
    padding: 14px 16px;
    background-color: #f9f9f9;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.ios-card-header h3 {
    margin: 0;
    font-size: 16px;
    color: #1d1d1f;
    font-weight: 600;
}

.ios-card-content {
    padding: 0;
}

/* iOS表单组件样式 */
.ios-form-group {
    display: flex;
    padding: 12px 16px;
    align-items: center;
}

.ios-form-label {
    width: 90px;
    color: #1d1d1f;
    font-size: 14px;
    font-weight: 400;
}

.ios-form-input {
    flex: 1;
}

.required-mark {
    color: #ff3b30;
    margin-left: 2px;
}

.ios-separator {
    height: 1px;
    background-color: rgba(0, 0, 0, 0.05);
    margin-left: 16px;
}

.ios-input,
.ios-select,
.ios-date-picker {
    width: 100%;
    border: none;
    border-radius: 8px;
    background-color: #f5f5f7;
}

.ios-radio-group {
    display: flex;
    justify-content: flex-start;
    gap: 16px;
}

.ios-date-input {
    display: flex;
}

.ios-textarea {
    width: 100%;
    background-color: #f5f5f7;
    border: none;
    border-radius: 8px;
    resize: none;
}

.ios-locked-input {
    padding: 8px 12px;
    background-color: #f5f5f7;
    border-radius: 8px;
    color: #86868b;
    font-size: 14px;
}

/* 账号安全相关样式 */
.account-status {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
}

.status-active {
    background-color: #34C759;
    color: white;
}

.status-text {
    color: #86868b;
    font-size: 13px;
}

.account-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background-color: #f5f5f7;
    border-radius: 8px;
    font-size: 14px;
    color: #007aff;
    cursor: pointer;
    transition: background-color 0.2s;
}

.account-action:hover {
    background-color: #e9e9eb;
}

/* 用户信誉样式 */
.reputation-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10px;
}

.reputation-level {
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.progress-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.progress-value {
    font-size: 22px;
    font-weight: bold;
    color: #409eff;
}

.progress-label {
    font-size: 12px;
    color: #909399;
}

.rating-stars {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rating-text {
    margin-top: 8px;
    font-size: 14px;
    color: #606266;
}

.last-transaction {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
}

.last-transaction-title {
    font-size: 14px;
    color: #606266;
    font-weight: 500;
}

.last-transaction-time {
    font-size: 14px;
    color: #909399;
}

.activity-summary {
    display: flex;
    justify-content: space-around;
    padding: 16px;
}

.summary-item {
    text-align: center;
}

.summary-label {
    font-size: 12px;
    color: #8e8e93;
    margin-bottom: 6px;
}

.summary-value {
    font-size: 18px;
    font-weight: 600;
    color: #1d1d1f;
}

/* 编辑按钮样式 */
.header-actions .el-button {
    padding: 8px 20px;
    font-weight: 500;
}

.header-actions .el-button--primary {
    background-color: #007aff;
    border-color: #007aff;
}

/* 覆盖Element Plus默认样式 */
:deep(.el-input__wrapper) {
    background-color: #f5f5f7 !important;
    box-shadow: none !important;
    padding: 8px 12px;
}

:deep(.el-input__inner) {
    color: #1d1d1f;
}

:deep(.el-radio__input.is-checked .el-radio__inner) {
    background-color: #007aff;
    border-color: #007aff;
}

:deep(.el-radio__label) {
    color: #1d1d1f;
}

:deep(.el-select__wrapper) {
    background-color: #f5f5f7 !important;
    box-shadow: none !important;
}

:deep(.el-textarea__inner) {
    background-color: #f5f5f7;
    box-shadow: none;
    padding: 12px;
    color: #1d1d1f;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .profile-grid-layout {
        grid-template-columns: 1fr;
    }
    
    .ios-form-group {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .ios-form-label {
        width: 100%;
        margin-bottom: 8px;
    }
    
    .ios-form-input {
        width: 100%;
    }
    
    .ios-separator {
        margin-left: 0;
    }
}

.publish-dialog :deep(.el-select) .el-input__wrapper {
    background-color: #fff !important;
    box-shadow: 0 0 0 1px #dcdfe6 inset !important;
    border-radius: 18px; /* 修改圆角与其他输入框一致 */
}

.publish-dialog :deep(.el-select) .el-input__wrapper:hover {
    box-shadow: 0 0 0 1px #c0c4cc inset !important;
}

.publish-dialog :deep(.el-select) .el-input__wrapper.is-focus {
    box-shadow: 0 0 0 1px #409eff inset !important;
}

.publish-dialog :deep(.el-form-item) {
    margin-bottom: 20px;
}

.publish-dialog :deep(.el-input-number) {
    width: 100%;
}

.publish-dialog :deep(.el-input-number__decrease),
.publish-dialog :deep(.el-input-number__increase) {
    display: none;
}

.card-favorite {
  margin-left: auto;
}

.card-favorite .el-button.is-favorite {
  color: #FF2D55;
}

.card-favorite .el-button:hover {
  color: #FF2D55;
}

/* 角色切换Tabs的特定样式 */
.role-tabs .el-tabs__item {
    font-size: 16px; /* 稍大字体 */
    padding: 0 25px; /* 增加内边距 */
    height: 48px;    /* 增加高度 */
    line-height: 48px;
}

.role-tabs .el-tabs__item.is-active {
    font-weight: bold;
    color: #409EFF; /* 更鲜明的激活颜色 */
}

.role-tabs .el-tabs__active-bar {
    height: 3px;
    background-color: #409EFF; /* 与激活文字颜色匹配 */
}

.role-tabs {
    margin-bottom: 25px !important; /* 增加与下方状态页签的间距 */
}

/* 订单内容切换动画 */
.fade-orders-enter-active,
.fade-orders-leave-active {
    transition: opacity 0.3s ease;
}

.fade-orders-enter-from,
.fade-orders-leave-to {
    opacity: 0;
}

/* 订单角色按钮切换样式 */
.order-role-buttons {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

/* 地址解析和图片上传相关样式 */
.location-input-container {
  display: flex;
  width: 100%;
}

.location-field {
  flex: 1;
}

.location-coordinates {
  margin-top: 8px;
}

.upload-container {
  margin-bottom: 10px;
}

.upload-text {
  margin-top: 8px;
  font-size: 12px;
  color: #606266;
}

.upload-tip {
  margin-top: 8px;
}

.role-button {
  flex: 1;
  max-width: 200px;
  padding: 12px 20px;
  border-radius: 8px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.role-button .el-icon {
  margin-right: 5px;
}

/* 消息中心 */
.messages-list {
    margin-top: 20px;
}

/* 求购列表样式 */
.buying-list-container {
    padding: 0px 0;
}

.buying-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 0px;
}

.buying-card {
    position: relative;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    padding: 20px;
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 220px;
    
    &:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    }
}

.buying-status-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 600;
    color: white;
    z-index: 1;
    
    &.active {
        background-color: #67c23a;
    }
    
    &.completed {
        background-color: #909399;
    }
    
    &.draft {
        background-color: #e6a23c;
    }
}

.buying-title {
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #303133;
    line-height: 1.4;
    padding-right: 80px; /* 为状态标签留出空间 */
}

.buying-description {
    color: #606266;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 15px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.buying-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 700;
    color: #909399;
    
    .buying-user {
        display: flex;
        flex-direction: column;
        gap: 5px;
        
        .buying-time {
            color: #999;
        }
        
        .buying-school {
            color: #4b5cc4;
            font-weight: 500;
            background-color: #f0f5ff;
            padding: 2px 6px;
            border-radius: 4px;
            display: inline-block;
            margin-top: 3px;
            font-size: 12px;
        }
    }
    
    .buying-category {
        background-color: #f0f2f5;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 12px;
    }
}

.buying-budget-top {
    margin: 12px 0;
    font-size: 18px;
    color: #606266;
    background-color: #fff9f9;
    padding: 8px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    font-weight: 600;
    
    .budget-label {
        margin-right: 6px;
    }
    
    .price {
        font-size: 30px;
        font-weight: 700;
        color: #f56c6c;
    }
}

.buying-footer {
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid #f0f2f5;
    
    .buying-actions {
        display: flex;
        gap: 8px;
    }
}

/* 求购卡片样式 */
.buying-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 50px;
  padding: 10px;
}

.buying-card {
  position: relative;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  transition: all 0.3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  }
}

.buying-status-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: white;
  
  &.active {
    background-color: #67c23a;
  }
  
  &.completed {
    background-color: #909399;
  }
  
  &.draft {
    background-color: #e6a23c;
  }
}

.buying-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.buying-title {
  margin: 0;
  font-size: 23px;
  font-weight: 700;
  color: #303133;
  line-height: 1.4;
  flex: 1;
  padding-right: 10px;
}

.buying-description {
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 44px;
}

.buying-meta {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 15px;
  font-size: 13px;
  color: #909399;
  gap: 20px;
  
  .buying-user, .buying-school {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  
  .el-icon {
    margin-right: 4px;
    font-size: 14px;
    color: #909399;
  }
  
  .buying-category {
    background-color: #f0f2f5;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
  }
}

.buying-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid #f0f2f5;
  
  .buying-budget {
    font-size: 14px;
    color: #606266;
    
    .price {
      font-size: 18px;
      font-weight: 600;
      color: #f56c6c;
    }
  }
  
  .buying-actions {
    display: flex;
    gap: 8px;
  }
}

/* 新增底部操作按钮区域样式 */
.card-footer-actions {
    padding: 12px 20px;
    border-top: 1px solid #F2F2F7;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    background-color: #F9F9FB;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.card-footer-actions .el-button {
    transition: all 0.3s ease;
    font-weight: 500;
}

.card-footer-actions .el-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>